Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Create animated and interactive infographics with CSS

Take infographics otthe next level and allow users to interact with the information


Infographics remain a hugely popular way for designers to showcase their skill, and explore data that can extract surprising finds. In the past they tended to be static drawings created in Photoshop and loaded up to the web. More recently, however, designers have started to push the boundaries, taking advantage of easily implemented animation through JavaScript or CSS3 animations.

Adding interactivity immediately makes infographics more appealing, especially if the reward is a spectacular animation. The core appeal and success criteria is the ability to visually represent the data in an easy, accessible manner. Varying the volume and dimensions of an object are just one way to illustrate data that changes, or to provide a comparison between different data elements.

Not all interactions will be obvious, especially where the data or illustration is complex. Signposts can be used within the design to help overcome any usability issues, and a careful choice of user interface elements will minimise potential user confusion.

Simple animations, like a cloud moving across the sky or a balloon floating can bring the page to life, encouraging visitors to experiment with the page and spend time exploring the information within.


Create a repeating CSS animation
CSS3 has brought the ability to create and fire animations in-browser, without external scripts or plug-ins. Animations don’t have to be triggered by user interaction, and can run indefinitely. This reduces the rendering load on the browser (as typically effects are rendered using your device’s GPU, where an equivalent JS effect wouldn’t, using more processor time, slowing the page).

Define the animation
CSS3 can now define preset animations that can then be applied to multiple elements. We can create different animations for different behaviours, each with a set of keyframes describing individual properties.

Apply the animation
Once the animation preset is complete, apply it to your element using the animation keyword, and specify the speed and amount of repeats the animation should make. You can specify infinite to run it forever.

Test the animation
As CSS3 is still being implemented, you’ll need to create multiple versions of each animation preset to use vendor prefixes. Provide a fall-back for old browsers, or consider it a progressive enhancement.


A great way to make your page feel alive and responsive to user input is to have it respond to normal user input in unexpected ways. This page changes the background in response to the user scrolling down. The effect is subtle, but helps to cement the idea that the experience is interactive. It’s also pretty easy to achieve using modern JavaScript libraries such as jQuery. Let’s break down the process to see how quickly you can implement something similar.


Animate according to scroll position

Create two graphics
This sky effect is achieved by overlaying two div elements, the same size, with different background images. Create two documents in Photoshop and apply gradient fills for your different skies.

Position and apply
Position the two divs> behind all your other content, and arrange them absolutely. As the window scrolls, we’ll reduce the opacity of the foremost