Page Preloading Effect

View demo Download source Today we want to show you how to create a very simple page preloading effect with CSS animations, SVG and JavaScript. For websites, where it’s crucial to load all or part of the assets, these kind of preloader screens can be a creative way to make waiting a bit less boring for the visitor. The idea for this tutorial is based on the beautiful preloading effect seen on the website of Fontface Ninja. Initially, the logo and a circular progress element slide up and when the loader finishes its progress animation, i.e. the page assets are loaded, the whole “header” moves up while the page elements are revealed with yet another animation. The sliding logo with its color change makes the icing on the cake. In this tutorial we will re-create the effect seen on Fontface Ninja with some adjustments and a second demo with slightly different effects. For the logo and the circular progress element we will use inline SVGs, so that we can style their paths in our CSS. We’ll create a little script for the stroke animation of the SVG loading element and then we’ll control the page animations with classes that we add to the main container. Please note that we’ll be using CSS animations and CSS 3D transforms, so this will only work as intended in browsers that support them. So, let’s get started! The Markup Let’s wrap a header and the main content division into a container. We have to keep in mind that we want to control anything that happens to the initial view and the content with...

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

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