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

Simple Stack Effects

View demo Download source Today we’d like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration. One can imagine a couple of triggers for these effects: item hover, on load, on scroll and on click effects. When using some subtle, but creative moves, we can make some interesting effects that elevate a static design. Note that for some of the effects we use perspective and 3D transforms so they will only work in modern browsers. The beautiful illustrations are by Isaac Montemayor. Check out his Dribbble profile, he’s an awesome illustrator. The markup is the following: <figure class="stack stack-sidegrid"> <img src="img/1.png" alt="img01"/> <img src="img/3.png" alt="img03"/> <img src="img/4.png" alt="img04"/> <img src="img/2.png" alt="img02"/> </figure> We use a figure with three or four images. All images, except for the last one, will be absolute: .stack { margin: 20px auto; width: 400px; padding: 0; position: relative; max-width: 100%; } .stack img { max-width: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s; } .stack img:last-child { position: relative; } Setting one of the images to position relative will give our parent figure a height. An example effect is the following: /* Bouncy Grid */ .stack-bouncygrid.active img { transform: scale(0.48); } .stack-bouncygrid.active img:nth-child(4) { transform-origin: 0 0; } .stack-bouncygrid.active img:nth-child(3) { transform-origin: 100% 0; } .stack-bouncygrid.active img:nth-child(2) { transform-origin: 0 100%; } .stack-bouncygrid.active img:first-child { transform-origin: 100% 100%; } This effect moves the items...

Creating a Border Animation Effect with SVG and CSS

View demo Download source Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions. Please note that this technique is highly experimental. Let’s take a look at the basic concept first, and then we’ll work towards the final effect. Please note that we’ll be using CSS transitions on SVGs which might not be supported in all browsers. When looking at the effect, it might not be immediately clear what’s going on, but when you look closely at only one border, let’s say, the top border, then you’ll notice that first, the white line’s width is decreasing from right to left and a new line moves in from the right with a bit of a delay, or gap. When adding all the other sides, it appears as if the top line moves around the corner down to the left side, the left side moves to the down side, and so on. You can surely create this effect without SVG, even without extra elements, just using pseudo-elements. But here we want to explore what we can do with SVG and how we can control it via CSS...

Shape Hover Effect with SVG

View demo Download source If you have visited the fantastic new edition of The Christmas Experiments then you might have noticed the really cool hover effect in the Christmas calendar that uses a triangular shape. The shape is made up of a triangle using borders and today I would like to show you how to achieve the same effect using SVG and Snap.svg. The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover. There are many creative possibilities and today we’ll create three different examples. The nice thing of utilizing SVG is that we can adjust the shape size to their parent container’s size and make everything fluid. The illustrations used in the demos are by talented Isaac Montemayor. See his original artwork on his website or Dribbble. So, let’s get started! The Markup What we’ll do first, is to draw two shapes in a vector graphics editor like Adobe Illustrator or Inkscape. Each shape will consist of one path and when we are done, we’ll copy the points of our paths to be used in our markup. Note that we’ve transformed a polygon into a path. If you are using Inkscape you can do that by selecting the object and choosing Path > Object to Path. The points for the path can be obtained from Edit > XML Editor… which will open a view as seen in the following screenshot: The “d” (path data) value is what you are looking for. For the markup we’ll have a section with the...