Getting traffic to your website can be hard and keeping those users on your website for more than a few seconds can be even more difficult. One way to enhance the user experience is through animation. Animation can be defined as “The state of being alive” and adding it to you website can do just that.
There are several ways to add movement to your website. One of the most popular ways is by adding an image slideshow to you home page. Why have one static banner when you can multiple images rotating or fading in a continuous loop. Another effective but subtle effect is to add an accordion to a FAQ page. The accordion will help your page flow by only showing the title, or question and once clicked the content below will be displayed.
Here at NetGain we like to use two methods animation.
Jquery
Jquery is a javascript library that simplifies event handling, ajax, and animation. To add jquery to your website you will need to download the framework from http://jquery.com/ and add it to your document before the closing head tag.
<script src=”path/to/jquery.js”> </script>
Now we are free to use any function from the library.
Html
<a id=” trigger”>Click Me</a>
<div id=” target”>
Your content here.
</div>
Jquery
$(‘# trigger).click(function() {
$(‘# target).animate({
height: ‘toggle’
}, 5000, function() {
// Animation complete.
});
});
What we have done is added an event every time the trigger div is clicked. This event is telling the target div to animate by setting its height to toggle. Toggle will go back and forth from a height of 0px to auto.
CSS Animations
You can create nice looking animations with CSS however not all browsers, internet explorer 8 and lower, will be able to render them. Before using CSS animations it is best to figure out your clients target audience and what browser they are most likely to use. If you’re building a website for an artist most likely that artists target audience will be using a more modern browser. If you are building a website for a larger corporation it’s likely that their viewers will be using an older browser. If you do decide to use CSS animations this is how you do it.
Html
<a id=” target”>Hover over me</a>
CSS
#target {
background-color: red;
}
#target:hover{
background-color: blue;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
transition: background-color 0.5s linear;
}
What we have done is set our targets background color to red and added a hover Pseudo class.
The first line of this Pseudo class is telling the target to change colors from red to blue. The last 4 lines are creating the animations in the various browsers. The first parameter is the property we wish to animate. The second is how long this transition will take to render and the last parameter is the effect.
By using a combination of animations your website will come alive, your users will be engaged and spend more time on your site.
Give Netgain SEO a call today to get your site moving!
– Andrew MacPherson, Head of Web Development