Over the last week or so, I have been reading a number of articles that cover the latest features available in CSS3. I was especially interested in the new capabilities to animate objects with CSS rather than relying on Javascript or flash.
Since coming back after the New Year, I set myself the challenge of writing a quick and easy slider widget that utilises the above techniques. You're probably thinking ‘not another slider’… well, fair enough, its nothing ground breaking, but what I wanted to show here was how simple it is to create one from scratch with a minimal amount of code.
Hopefully this will allow you to create your own in the future, rather than trying to hack around with one you found on the web, to make it fit your site design.
There are three key elements here. The <section> is the main element that will display the image, in the style sheet we set the dimensions and also a starting image.
Finally, we have an unordered list to act as the navigation:
section ul {list-style:none;margin:0;position:absolute;left:0;top:40px;width:800px;z-index:1001}section ul li a {width:20px;height:20px;background:#fff;border:1px solid #333; margin:10px;float:left;}
The next thing we need to do is to define the CSS animations that we are going to use. For the purposes of this demonstration, we are going to have two animations.
The first is going to bring the new slide in from the right hand side. This is done by setting the background-image for “inner-slide” to the new image, and then animating the background position from “left:900px“ (i.e. just of the right side), to “left:0px”. The second animation will perform a similar function, animating the current slide (i.e. background of <section>) from “left:0px” to “left:-900px” (just of left side). Both these animations will be called in unison, bringing the new image in as the old is exiting.
@-webkit-keyframes slide-in { from { background-position: 900px 0;} to {background-position:0 0;}} @-moz-keyframes slide-in { from { background-position: 900px 0;} to { background-position:0 0;}} @-o-keyframes slide-in { from { background-position: 900px 0;} to { background-position:0 0;}} @keyframes slide-in { from { background-position: 900px 0;} to {background-position: 0 0;}} @-webkit-keyframes slide-out { from { background-position: 0 0;} to {background-position:-900px 0;}} @-moz-keyframes slide-out { from { background-position: 0 0;} to {background-position: -900px 0;}} @-o-keyframes slide-out { from { background-position: 0 0;} to {background-position:-900px 0;}} @keyframes slide-out { from { background-position: 0 0;} to {background-position: -900px 0;}}
Once defined, we then assign the animation to a new class, together with information regarding how long the animation will last, a timing function (that specifies the rate of animation) and also the delay before it begins. The syntax, for this is as follows:
animation: name duration timing-function delay iteration-count direction;
Using the above, we define the following two classes:
Now, all we need to do to complete the slider is to apply these classes to the respective elements at run time, and they will animate into place. To do this, we need to call the javascript function moveslider() when the user clicks on the different list elements. This function looks like this:
A couple of points about this function, we change the classes of <section> and <div id=”inner-slide”> using the getElementById() and setting className(). Through changing the classes of these items, we initiate the animations between slides.
I have opted to use a toggle type function; this effectively begins by moving the first slide of the page and bringing the second one on. Then, the second time the function runs, it moves the first slide onto the page and the second off. It strikes me that this is a little cumbersome, however, it’s the only way I could get it to work (I'm sure someone can suggest an improvement to this). I also found that I need to explicitly set the background position again after the animations were completed; I was finding the incorrect slide was showing every other cycle if I didn’t set this explicitly.
As I mentioned, this is all quite new to me, therefore if anyone has any improvements / suggestions please let me know. As far as im aware, this should degrade graciously, as if the animation is not supported, then the click event of the anchor tag will simply load the image in without the effect.
Comments (0)