Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
16th November 2012

Create animated and interactive infographics

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

Create animated and interactive infographics

inspiration: www.evoenergy.co.uk/uk-energy-guide

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.

TECHNIQUE

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.

INSPIRATION

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.

TECHNIQUE

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
div to create a fade to the one behind.

A little bit of script
Use JavaScript to get the scroll position of the window. Write a function that uses the scroll position to calculate the degree of opacity for the top-most div. Test until you get a nice transition between the two backgrounds according to the amount of scroll.

001 $(document).ready(function(){
002 // Get the scroll position of the window
003 fadeBackground($(document).scroll Top());
004 // If the page is scrolled, call the function again
005 $(document).scroll(function() {
006 fadeBackground($(document).scrollTop());
007 });
008 });
009 Use the position to calculate opacity
010 function fadeBackground(scrollpos ) {
011 if (scrollpos < 300) { 012 opacity = parseInt(100 – (scrollpos/300 * 100)); 013 if (opacity > 99) {
014 $(“.div1”).css({“opacity”:1});
015 } else if (opacity<10) {
016 $(“.div1”).css({“opacity”:0});
017 } else {
018 $(“.div1”).css({“opacity”:(opacity/100)});
019 }
020 } else {
021 $(“.div1”).css({“opacity”:0});
022 }
023}

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.