From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
Today we’d like to share an idea for a photography website layout with you. The concept is based on a slider of several photo stacks using Flickity and once a stack is opened, it slides up and reveals its content. The background image will react to the mouse movement, creating a tilt-like motion illusion inspired by the effect seen on The DNA project, the interactive album site by j.viewz. Once a stack is opened, the background image will transform into a small, logo-like circle and move up. This effect is inspired by Alexey Oksanchenko’s animated Dribbble shot of a profile image animation.
We are using Flickity by David DeSandro under the terms of the GNU GPL license v3.
Please note that if you want to use Flickity to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a Flickity Commercial License at flickity.metafizzy.co.
If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Flickity under the terms of the GPLv3. Read more about Flickity’s license.
The camera icons are made by Freepik from www.flaticon.com and they are licensed under CC BY 3.0
Have look at some screenshots. This is the initial view with the photo stacks shown as a slider. The slider will be shown after all images are loaded.
When moving the mouse, a semi-transparent copy of the background image will tilt according to the mouse position, creating a fun effect:
When a stack is opened, the content shows by sliding up all items with a subtle transition:
The main background image is by Paweł Kadysz from tookapic.
We really hope you enjoy this layout and find it inspiring.
I really like this, very intuitive on how it works and scrolls, as usual inspirational and very helpful. Thanks again Mary Lou.
I like how you make the web more interactive! Lots of eye candy and practical!
Very nice concept Mary Lou!
There’s a little glitch on the mobile version tho (iPhone 5S / Safari) : the hamburger menu doesn’t work (it seems it interferes with the tilt-like effect)
Incredible! Loving all the ideas you’re coming up with for the web!
Holly schit this rocks! So simple and very effective!
How did you made the main picture b/w this way? Looks impressive. Thanks for sharing, Boris
you are amazing. Thank you so much
lovely! ..but.. how to add another page for example when u click on the contact tab on the menu it slides just like the stacks but into another page ? thnx a lot for this!
Great work! Love the photo stacking! One thing though: Shouldn’t the stack be clickable as well? It felt really weird for me to only be able to click the link. Small detail 🙂
Amazing work!
I really like this design. One suggestion: make it so when you go into the stack, you are able to zoom in on an individual pic in the stack by clicking on it, then apply the same tilt-shift effect when looking at that pic. What do you think? How hard would this be to implement?
Amazing work….. very beautiful
I’am new here… can we use these designs with proper recognition of course
Congratulations, you’re the BEST!
Thank you marry
Absolutely 😀
It looks great in mobile!
Undoubtedly one of the most beautiful and functional web pieces I’ve ever seen.
Wonderful implementation.
It is really good and nice concept. Good luck for your work.
Mary Lou it’s very nice and beautiful.
This is a great work, i’ve noticed a broken linked on the “Dribbble Shot”. Anyways i’ve love this work, cheers 🙂