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

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

Ask A Dev: Facebook Origami and Animation Prototypes

In our latest Ask a Dev video, web architect David Dulak answers this week's top question on whether it's possible to match an animation prototyped in Facebook Origami to the web. Prototyping animations has recently become a huge part of design and development, as it's a great way to demonstrate what a working project will look like See also: What Can IFTTT Do for You? As far as how to bring prototyped animations from programs such as Facebook Origami to web, there are two main options. One is to come up with the spring animation graph on your own, or by using the help of an open-source library like Frame JS and Facebook Rebound, which include web components. The second option is to use CSS3 keyframe animations. If you go the latter route, then Dulak recommends checking out Lavaca, which has a spring helper right in the animations library Read more...More about Animation, Css3, Mashable Video, Tech, and Apps...

Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG)

Today we are really happy to share a set of creative activity indicators by PixelBuddha with you! You may have seen the first set of the Flat Preloaders that consisted of round style colorful activity indicators. The set was so well received and today we’re very glad to offer you an exclusive freebie on Codrops — the second part of the preloaders collection, and this time in square style. About the Preloaders The preloaders were made using trendy flat colors, so they will fit perfectly into any modern interface. Every preloader comes in three sizes, 32×32, 64×64, 128×128. You will also find the Adobe After Effects (CS6, CC versions support) file, where you can modify, scale and change the colors of the preloaders. Preview Have a look at the complete set of these creative squared activity indicators: Download the set for free You can download the ZIP file here: Download the Flat Preloaders ZIP file (3 MB) Please take a look at the license terms included in the ZIP file. On PixelBuddha.net you can also download the first part of the preloaders collection and find many other wonderful freebies with new resources being added weekly. If you’d like to contribute and publish your freebie on Codrops just drop us a...