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.
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.
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.