How to Create a Tiled Background Slideshow

View demo Download source Today we’d like to show you how to recreate the background image slideshow seen on the stunning website of Serge Thoroval’s Atelier that was coded and designed by talented Jean-Christophe Suzanne and Jonathan Da Costa. If you haven’t seen the website, you should definitely go and check it out; it’s full of interesting and creative effects. The slideshow that we are recreating today, is made up of four tiles that move individually, making the image split while scaling up the new image. This combines into a really nice effect which we will re-implement today using 3D transforms, transitions and animations. In addition to that effect we’ll also add two more variations. The aim that we want to keep in mind, is to achieve a super-smooth effect experience. Note that we’ll be using very modern CSS properties, so the desired effect will only work in the newest browser versions. The images used in the demos are made with really great mobile phone PSD mockups from the team of Mockuuups.com. You can find the free iPhone 5S Mockups in this Dribbble post by Tomas Jasovsky. Let’s get started with the markup. The Markup For the slideshow we will need a special structure that will allow us to play with four different tiles, all containing the same image but with different positioning. We need to make sure that everything stretches over the full viewport since this is a “fullscreen” slideshow. We’ll define a simple initial structure that will allow us to specify which images will be visible in each panel (or slide) and then we’ll create our repeated...

Sanseveria Bagelsalon

Responsive one pager promoting a new Belgian "Bagel Bar" situated in the city center of Bruges called 'Sanseveria Bagelsalon'. Some delicious imagery that fills a big screen well. The menu items link out to a separate commerce...

Inspiration for Item Transitions

View demo Download source Today we’d like to share some item transition inspiration with you. We tried to keep the idea of the transition general, so we did three different use cases: a small image slideshow, a large header slideshow and a slideshow using product images with a transparent background. These transitions don’t have to be restricted to a slideshow, of course. But to see them in action, this was the best option for a demo. You can surely imagine transitioning from one state to another in many different circumstance (think about scrolling a page, loading items, clicking a button, sending a form, and many many more). A very special case is the usage of (product) images with transparent background. Depending on the item itself, there are many possibilities for transitions that imitate the real-world movement or behavior. A great example in the wild can be found on the brilliant hat presentation section of Optimo Chicago. The slideshow conveys a feeling of throwing a hat into the viewport, transmitting the feeling of lightness and augmenting the viewing experience. This is such an excellent example of how adding the right animations can enhance product browsing and bring it to another level. In our last demo, we give you some simple inspiration using a wine bottle to explore the feeling for heavier objects. For transitioning the state, we are using CSS Animations. This allows us to specify a certain behavior for the items when coming from any direction. This can be useful for direction-aware navigation of items, like you can see in the demos. One of the transitions that can be...

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