Photography Website Concept

A photography-inspired website layout with an expanding stack slider and a background image tilt effect.

PhotographyWebsiteConcept

View demo Download source

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 this is very experimental and made to work with modern browsers. IE does not deal well with viewport units which we are using in some transforms, so you might not see the sliding effect of the content.

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.

PhotographyWebsiteConcept_01

When moving the mouse, a semi-transparent copy of the background image will tilt according to the mouse position, creating a fun effect:

PhotographyWebsiteConcept_02

When a stack is opened, the content shows by sliding up all items with a subtle transition:

PhotographyWebsiteConcept_03

The main background image is by Paweł Kadysz from tookapic.

We really hope you enjoy this layout and find it inspiring.

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or blog updates right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.