Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

How To Bring Interactivity To Your Website With Web Standards

Adding interactivity and animations to a design doesn’t have to be complicated or make the website inaccessible when you use modern Web standards. In this article, we’ll explore several examples and theories that employ CSS, HTML, SVG, the canvas element and JavaScript. Some of these techniques you’ll know, others you may not have considered. Let’s start with the basics.

Further Reading on SmashingMag: Link

1. HTML and JavaScript Link

Manipulating HTML with JavaScript is the most common method of adding interactivity to a website. But before you start using JavaScript, having a strong understanding of the CSS visual formatting model5 and box model6 is important. They are vital to making sense of how HTML elements can be manipulated visually. When you dynamically change the style of an HTML element, it will flow with and react to the rest of the document. Learning to anticipate and control what is affected can be difficult.

Using a JavaScript library such as jQuery7 can take the pain out of cross-browser support. jQuery also provides common functionality that makes interacting with HTML a quicker process. It’s necessary to learn the basics of JavaScript before looking at a library like jQuery, to ensure that you understand the fundamentals and therefore know how jQuery does something, not just what it does. The distinction here is key to being able to write your own JavaScript.

A Slideshow Example Link

The website for the Momento App8 has a horizontal-scrolling slideshow that presents new content when the user clicks left and right.

Momento App has its own jQuery plug-in for the slideshow effect.

How It Works Link

The five slides are img elements wrapped in divs and positioned sequentially inside their containers:

<div id="tour_pages">
    <div id="tour_page_capture" class="tour_page">
		<img src="images/tour/capture.png" />

    <div id="tour_page_import" class="tour_page loading">
    	<img src="images/tour/import.png" />

    <div id="tour_page_browse" class="tour_page loading">
    	<img src="images/tour/browse.png" />

    <div id="tour_page_read" class="tour_page loading">
    	<img src="images/tour/read.png" />

    <div id="tour_page_protect" class="tour_page loading">
    	<img src="images/tour/protect.png" />


<a id="tour_nav_previous" href="#">Previous</a>
<a id="tour_nav_next" href="#">Next</a>

The container tour_pages has a fixed height and width in the CSS. It also has the overflow property set to hidden.

#tour_pages {
    position: absolute;
    left: 0px;
    top: 116px;
    height: 420px;
    width: 940px;
    overflow: hidden;

You can see in the image below how the five slides are positioned to move inside their containers. A container will clip everything outside of its boundaries because of overflow: hidden. This creates what we can call a window or viewport effect.

Showing the clipping frame and hidden elements.

This set-up can all be done with CSS and HTML alone. To create the interaction, we need to use JavaScript to move the slides when “Next” or “Previous” are clicked. The JavaScript used by Momento is quite involved, so I’ll leave it as an exercise for the reader to inspect, but I hope this example provides a good illustration of how HTML elements are controlled while remaining part of the document structure.

When to Use JavaScript Link

In the Momento example, we can see how JavaScript is useful for controlling access to content. The hide and reveal technique in all its forms is useful for keeping visible content clean and enhancing the user experience.

The website is intended to sell a product, and this slideshow effect imparts a sense of quality, something that is more exciting than the norm. Interactive content like this works best for promotional content.

When Not to Use JavaScript Link

Interactivity can be a lot more engaging than static content, but it’s not always the most usable solution. Consider the following:

  • Will the user understand and expect the relevant action that occurs?
  • If content is hidden, will the user know how to access it?
  • Does the additional user input actually improve the overall experience?
  • Will the website be usable on all devices?

If you cannot justify the JavaScript against these questions, then you’d be wise to stay away. Be vigilant: ask yourself whether the extra eye-candy is really necessary.

Usable and accessible don’t just mean that a device is technically supported by the website. The website should be as easy to use as possible for all audiences—from young to old—and in all environments.

Further Reading Link

Interactivity and JavaScript are almost synonymous in Web design, but as we’ll see in the next example, JavaScript is not always necessary.

2. CSS3 Transitions Link

The CSS :hover pseudo-class allows for a style change when the user hovers over an element. Typically used on the <a> element for links, the change can provide visual feedback for the user. While not exactly revolutionary on its own, :hover can be used to great effect.

Designer Christoph Zillgens13 uses CSS3 transitions to enhance the hover effect. You can see the transition phases below:

Three phases of the hover transition: default, transition and then hover.

How It’s Done Link

Inspecting the HTML doesn’t offer many clues. At a glance, we can see a normal link. This is perfect for semantic markup, but how do we create the transition?

<p class="category_link">
    <a href="">
        <span>View all Posts</span>

The only unusual addition here is the extra span tag wrapping the text. The CSS reveals the secret. Let’s take a look (some styles have been omitted below for readability):

.category_link a {
    background:rgba(0,0,0,.05) url(img/big_icons.png) 10px 10px no-repeat;
.category_link a:hover {
    -webkit-transition:background-color .4s ease;
.category_link a span {
    -webkit-transition:all .3s ease-in-out;
.category_link a:hover span {

We can see in the HTML and CSS that both the a and span are converted to block-level elements to allow for positioning and sizing. They are styled in two states, default and hover (A and C in the image above).

By default, the span starts of with an opacity of 0 and at 150 pixels from the top. On hover, the span is fully visible and 130 pixels from the top. The anchor has a simple background color change between A and C.

At this stage, the hover effect jumps from default to the hover state instantly. This works fine for older browsers, but with CSS3 transitions we can create a silky-smooth animation between the two points.

Adding the Transition Link

We now have a start point and end point for our hover effect. To create the intermediate transition, we can use the transition property (defined here14) with a format like this:

transition: [transition-property] [transition-duration] [transition-timing-function]

In the default span style, the transition property was added like so:

-webkit-transition:all .3s ease-in-out;

This means that whenever the default style is applied, the span will transition between its current style and the default style. In this case, all CSS properties are affected, and the transition is triggered by the mouse hover. If we want to transition a single property, like the background-color of the anchor, we can do this, too:

-webkit-transition:background-color .4s ease;

Creating hover transitions is as simple as specifying the default and hover states with CSS and then letting the transition property animate any changes between the two.

When CSS Transitions Work Link

Using the transition property with :hover is a very handy technique that bypasses JavaScript entirely. Removing this extra dependancy can save time and space.

That said, transitions are also triggered by dynamic HTML changes using JavaScript. If you’re used to toggling classes with JavaScript to change styles, then why not see what difference a transition or two can have?

You’ll notice that this example uses the -webkit- vendor-specific property for Safari and Chrome, but transitions are also supported in Opera using the -o- prefix and the new Firefox 4 beta with -moz-.

The good news for graceful degradation fans is that older browsers (i.e. Internet Explorer) ignore the transition and apply the style change immediately. This means you’ll rarely find a situation in which using transitions degrades functionality.

Other Examples Link

Here are a few more websites whose use of CSS transitions is noteworthy:

  • When using hover, the affected elements don’t always need to sit inside the same container. Love Nonsense15 makes use of the adjacent sibling selectors to trigger transitions.
  • Simurai demonstrates a combination of transitions and transforms to create a complex experimental toggle button using nothing but CSS and HTML.
  • The :hover is not the only trigger for transitions. Neal Grosskopf’s CSS-only lightbox16 demonstrates the use of the :target pseudo-class.

Further Reading Link

Here is a selection of in-depth articles that cover the nuances of CSS transitions:

3. Animations With SVG Link

Hover effects work well for links but can be confusing when triggered unexpectedly on other elements. They’re also less accessible on touchscreen devices. Adding interactivity when the user clicks is usually very useful because it provides feedback to the user, and sometimes it just feels more intuitive.

Get Satisfaction3519 uses a clever technique to showcase 12 different testimonials. In this example, the company makes use of scalable vector graphics20 (SVG) to aid with the animation.

The “Wheel of Satisfaction” animates an SVG image.

Part of the HTML for this wheel looks like this:

<div id="wheel-logos">
    <svg xmlns="" version="1.1" width="1003" height="315">
        <image x="91" y="-505" width="820" height="820"
        preserveAspectRatio="none"         href="sites/all/themes/getsatisfaction/images/wheel_logos.png"
        transform="rotate(3600 501 -95)"></image>

You can see above that the wheel image is contained within an svg element. SVG is an XML-based standard and can be written inline in HTML. SVG is particularly useful because images in SVG can have a transform attribute22, allowing for rotation, scaling and skewing (unlike normal HTML img tags).

To create and animate the wheel, Get Satisfaction used a library called Raphaël with jQuery23:

var R = Raphael("wheel-logos", 1003, 315);
var logos = R.image(src, 91, -505, 820, 820);
$("#wheel-spin-btn, #wheel-controls .spin").click(function(e) {
    if (status != "animating") {
        num = Math.floor(Math.random()*(items-1)+1),
        angle += (num+items)*rotate;
        logos.animate({rotation: angle}, 3000, "<>", reorderLinks(3000));

In the JavaScript above, jQuery binds the click event to the spin button. When the button is clicked, Raphaël’s animate() function is called to rotate the image. If you open the Firebug extension24 in Firefox, you can see the SVG image’s transform attribute update live as it spins:

Get Satisfaction live code in Firebug

True SVG Animation Link

As we’ve seen above, SVG can be manipulated with JavaScript just like HTML. But did you know that SVG has its own animation properties? It’s in the SVG specification25, but we rarely see it used. Here’s an example element from the W3C draft:

    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />

SVG can even contain ECMAScript26 (which is the standardized scripting language on which JavaScript is based) to add interactivity inside. For more information on this usage, I’d suggest starting with Peter Collingridge’s article “Mouseover Effects in SVGs2827.”

When to Use SVG Link

Always consider the pros and cons of any technology. The most logical solution is not necessarily the easiest to implement. SVG provides an alternative graphics environment that may make animation a piece of cake in some situations. The scalable nature of SVG also provides obvious benefits over fixed-sized raster images.

The reason we rarely see SVG used is that Internet Explorer (below version 9) has no support for it. But not all is lost! The Raphaël library that Get Satisfaction uses automatically substitutes SVG for VML (vector markup language), which IE can understand.

Further Reading Link

Scalable vector graphics are a relatively untapped resource in the Web designer’s toolkit. Here are more articles to get your creativity flowing:

4. Animations With Canvas Link

The CSS transitions that we examined above can alter any number of properties to create a lot of visual effects, but ultimately they’re still limited to CSS styles and fixed-length transitions. Is there a way to create more advanced animations?

Google’s Chrome OS features page30 demonstrates a hover effect that has continuous animation:

Google Chrome OS features hover effect31
Chrome features: each icon animates on hover.

To find out how this works, let’s start by looking at the HTML again:

<a href="features-speed.html">
    <canvas class="c1" height="150" id="canvas-uuid-1" onmouseout="javascript:hideBadge(0)" onmouseover="javascript:showBadge(0);" width="150" style="cursor: default; ">
        <img alt="" src="static/images/features-speedicon.png">

Here we have an a link that contains a canvas element (which itself contains an image). For browsers that do not support canvas, the image serves as a fallback—who said supporting IE6 was hard!

We can also see that the onmouseover and onmouseout attributes are set to trigger JavaScript functions named hideBadge() and showBadge(). This creates a behavior similar to that of the CSS :hover pseudo-class we saw in our second example.

Google’s JavaScript for controlling this is fairly extensive, but it’s basically drawing a series of SVG images onto the canvas to create the animation.

Google Chrome OS feature assets
The individual SVG assets for the canvas animation.

If you want to learn more about animating with canvas, then take a look at the Canvas Animation Kit Experiment32 (CAKE), the JavaScript library that Google uses to animate its hover effects.

How Useful Is Canvas? Link

Canvas is a very flexible HTML element for creating scriptable graphics and is by far the most powerful solution for interactivity and animation. By assigning similar effects to actions like click and hover with JavaScript, we can give the user a visual treat, unrestricted by the scope of HTML and CSS.

The downside? Google’s example isn’t very accessible, and the fact that the content in the canvas element is generated dynamically is a real issue. Search engines will have a hard time seeing your canvas content, and more importantly, assistive technology such as screen readers will struggle as well.

If you want to display content with the canvas element, then providing the same content in an alternate and accessible format would be considerate. Canvas is probably best used to display more visual data such as graphs, charts and diagrams. These are situations in which the content can be isolated and presented in a way that’s easier to understand.

Further Reading Link

A Note On Adobe Flash Link

Saving the best for last (well, you never would have gotten this far if I’d put this first), we have the powerhouse that is Adobe Flash. Flash is not a Web standard, but it is used extensively across the Web.

Adobe Flash provides a sandbox to create interactive content using ActionScript. ActionScript 3 shares the same ECMAScript roots as JavaScript, so learning one after the other is a relatively easy move. The problem is that Flash is a proprietary plug-in and not an open Web standard. Admittedly, it can be a lot more powerful and, in some cases (like with video), may be the only appropriate solution at present.

However, always weigh up arguments for and against Flash. You’d be amazed at what’s possible with modern standards. That said, despite the negative opinion of many Web designers and developers, Flash is still a commercially viable option. But this is becoming more and more debatable as standards progress.

To Summarize Link

We’ve seen some great examples of what can be achieved with Web standards today.

Here are a few points to remember:

  • HTML can be manipulated directly with JavaScript.
  • The CSS :hover pseudo-class and transition property can be combined to create a wide variety of hover effects.
  • Images can be contained within inline SVG, providing a simple way to transform them beyond the limitations of HTML and CSS.
  • canvas and JavaScript provide the most powerful (but a less accessible) solution for interactivity and animation.

These techniques can bring a website to life and enhance the user experience. But they also have the potential to make a website look like a hangover from the DHTML era. There’s no accounting for taste, so use it with care. Always focus on the accessibility of content and on user experience over eye-candy.

One Last Thought Link

When are JavaScript libraries required? We’ve already seen examples of canvas and SVG in which they’re used. JavaScript libraries aim to provide common functionality in order to drastically reduce implementation time. But using them for a single function can create a hefty load. Get Satisfaction3519 uses the Raphaël library only once to manipulate the SVG image rotation. Could this have been done without Raphaël?

The answer is yes36… but it’s not that simple. Browsers such as Internet Explorer don’t support SVG, and Raphaël uses VML37 instead. Careful research is required before rolling your own solution. It may be more difficult than you initially suspect.

There are libraries such as Modernizr38 in which individual functions can be isolated as required very easily, so that is always worth considering. With the new Modernizr beta preview, the situation has been recognized, and Modernizr now provides a completely custom library for your particular requirements.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38

↑ Back to top Tweet itShare on Facebook

David Bushell is a website designer and front-end developer working at Browser Creative, London. He blogs regularly at and xheight, and shares inspiration and web design related interests at Design Heroes. You can also follow him on Twitter.

  1. 1

    Thanks for the article, you’ve provided some great examples….Look forward to reading more from you.

  2. 2

    Well done dave great work!!! Keep it up!

  3. 3

    Very interesting indeed. Oil on canvas ;)

  4. 4

    I really like the information you posted about canvas. it is def new to me, and I have always wondered how to take advantage of non-Flash animation for the web.

    thanks! :)

  5. 5

    Great article !

  6. 6

    David, thanks for sharing this overview and exemples. Well written article.

  7. 7

    I never knew how SVG worked until you wrote this article. Great insight. Thanks!

  8. 8


    February 3, 2011 8:54 am

    CSS transitions are only supported by webkit based browsers and Firefox4beta. We are talking about <30% of users. Flash is around 99% !
    If a technology not widely adopted it seems silly to customize for it. Especially when there are better ways to achieve the same end result.
    Unless of course you are simply trying to impress your peers. Which I am.
    Nice work!

    • 9

      To a degree you are right, and you always need to make this decision for production sites for a client. However, a couple of points:

      – transitions will become increasingly available, so that while they may not be widespread now, in a few years they will be. As long as you have a good fallback for anything essential, you’re simply providing a modern experience that more and more people will see.

      – even if you can’t use them for anything essential on client sites yet, the people experimenting with new features will be the ones clued up enough when these features are more widely available to be the experts, whereas those who dismissed the features will be playing catch-up.

    • 10

      David Bushell

      February 6, 2011 1:58 pm

      You’re right, but I feel they’re also an effect you can use that will degrade nicely. It’s nice eye-candy, and as you say, something to show off about :)

  9. 11

    Excellent exampless

  10. 12

    Ramsez Stamper

    February 3, 2011 10:43 am

    Great links, decent descriptions, my only beef with this article is that items 2 and 4 both do not work in internet explorer, which is still the dominant browser on the market worldwide.
    Item 2, they have some text saying they haven’t had the time to make the site fully functional in internet explorer yet, and on 4 (the google chrome site) it just replaces the canvas animations with flat graphics. Ironically enough the icon that stands out is the one right above the header that reads “Same experience everywhere”. I know that’s for Chrome OS, but it kinda hits it on the nail for this article that Canvas, and CSS3 animations just aren’t ready for the prime time, and yes, we can keep using them on our own pet projects, but when you build something that the whole world needs to use, you must make it work in all the major browsers or at least find some sort of way to give them a similar experience. This is why flash is still used heavily and will be for at least a few more years. Use what works in all browsers, keep the rest in mind until they are actually supported.

  11. 13

    Nice! Rollovers and slideshows without JS. That is too cool.

    As for the lack of transition support, well it does degrade fine.

    Even if you go for JS or Flash, these techniques would be very nice for the noscript versions.

    Regards, BPM

  12. 14

    Foreword, I invested a lot of time with SVG without any outcome.

    > The reason we rarely see SVG used is that Internet Explorer
    > (below version 9) has no support for it.
    That is not exactly true.
    Before Adobe bought Macromedia, when the Acrobat installation or update was made, the SVG extension was installed.
    So basically all the browsers was supporting SVG until late 2006

    > I never knew how SVG worked until you wrote this article. (Conrad)
    W3C has done close to nothing to promote SVG.
    But now maybe they will make a logo for SVG as for Html5.
    Consider that other then animation and shapes, SVG has a full range of Photoshop like effects. Moreover you can have the text with the font you like (without downloading the font) and it is still real text.
    In SVG you can realize a replicable ‘style’: you have a menu with shape, text, shadows, blur, blending et al. Your write the style once and you apply to all elements of the list. To change one or more list elements, just change the text and all is updated.

    Never understand why anybody want to use it…


  13. 15

    Great Article! Javascript libraries when implemented right can improve usability and user friendliness.

  14. 16

    awesome examples. can’t wait to build me a SVG spinner!

  15. 17

    Steffi - Web Courses Bangkok

    February 3, 2011 7:12 pm

    very useful information, thank you for sharing this

  16. 18

    How come you say Flash is not a Web standard :( Nice article except that part :D

    • 19


      It’s a plugin, not something that is inherent to the browsing experience like Javascript and HTML/CSS… I know it’s wack, 90%+ machines use it probably… it’s too resource heavy for most devices that aren’t plugged into a wall… so Idk… maybe it’s archaic… it’s like Jordans… Not everyone can do it… and look at all the busters who jumped into graphic and web design. No wonder Flash became non-supported. Noone wants to really be revolution they just want to dress like it, so, bLam! HTML5 to the rescue, now everyone can get their friends jobs. It’s easy now. Forget being a craft and esoteric, just copy and paste, and upload your images. It’s like skateboarding and hip-hop. It sells out and becomes sport for business men. Follow the formula. Forget the lifestyle. Farm it out. Oh well. Thanks to mySpace hopefully a bunch of 18 year olds will graduate and knock the posers out of their job positions and the g’s will take over the business aspect and sell all the work to the rest of the Americas from Mexico to Brazil and over in Eastern Europe and Asia. I’ll become a doctor though. Forget this.

  17. 20

    I like having Flash on my website that degrades to Javascript alternative content using swfObject. There’s a lot you can do with Flash and JavaScript using functions and; and externalInterface.callback();. Even passing data you can use strings and interact with the XML data like I did altering Piecemaker 2 to execute lightbox to display my images. Underneath I’ll have one of those genergic Jquery sliders everyone’s been using. Imitation is the sincerest form of flattery, but whatever happened to originality. The internet used to surprise and inspire me. Especially when people would do damage in Flash. I remember being 11 or 12 years old viewing the source to see how they changed link colors on roll over using css or executed alert boxes when you grazed a girl’s tits on a 18+ site. These days it’s boring and I can’t wait to make my money and vamp out of web design/interactive media. I am working on doing my site on AfterEffects and then when you click links it will transition with Javascript telling the Flash to load and unload and tween while using Javascript to fade in and out content for seo value. Otherwise it’ll degrade to what you’re looking at like in mobile browsers, and use jQuery to fade in and out content instead of doing a page refresh to change pages since the look remains the same.

  18. 21

    First example = terrible markup ='(
    “Div” isn’t the only tag on earth.
    What about a “Bringing Semantics to your website” ?

  19. 23

    As a web developer, I have one thing to say about Flash “I HATE IT”

  20. 25

    Great post,

  21. 26

    I hate flash! but i loved your post ;)

  22. 27

    great resource for css3 transitions. but opening the Love Nonsense website on Chrome caused my Win7 to BSOD. haha

  23. 28

    Great article keep up the great work. When to think SVG will be more main stream? and what do you think it will do to the Flash and Silverlight market?
    Is IE9 going to better support SVG?

  24. 29

    Great article and examples! Especially the SVG and Canvas. Looking forward to the learning more about these techniques. And adding rich interactivity to my websites using modern web standards.

    Flash is a powerful tool for animating static and dynamic content, but the fact that content is not searchable is a big downside. And I try to avoid using it when I can.

    These examples offer a great alternative to using Flash.


  25. 30

    “This is a freedom post” great read

  26. 31

    my 2cents on sliders and jquery:

    You should design with html and css as if the user has javascript disabled. This means setting up the viewport with html/css so that either overflow is hidden or only the first frame is set to visible.
    jquery should then be used to animate the slideshow, AS WELL AS place the left and right arrows.


↑ Back to top