Tilted Content Slideshow

View demo Download source The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations. The slideshow won’t be the same as the one on the FWA page: the items won’t be “floating” or moving on hover and we’ll only have a simple navigation. If you have seen the effect over at the FWA landing page you will notice that the movement directions of the screenshots are random (moving up or down and sliding to the sides). We want to achieve the same effect by randomly adding some data-attributes that control the type of animation. Please note that we’ll be using CSS 3D Transforms and CSS Animations which might not work in older or mobile browsers. For the demo we are using some website screenshots from Zurb’s Responsive Gallery. So, let’s get started! The Markup The slideshow has a main container with the class and ID “slideshow” and we can use an ordered list for our slides. Each list item contains a description with a title and a paragraph. It will also contain a division with the class “tiltview” where we will add our screenshots. The classes “col” an “row” will help us set the right layout for the inner anchors: <div class="slideshow" id="slideshow"> <ol class="slides"> <li class="current"> <div class="description"> <h2>Some Title</h2> <p>Some description</p> </div> <div class="tiltview col"> <a href="http://grovemade.com/"><img src="img/1_screen.jpg"/></a> <a href="https://tsovet.com/"><img src="img/2_screen.jpg"/></a> </div> </li> <li> <div class="description"> <!-- ... --> </div> <div class="tiltview row">...