How to Create Flick Animations with CSS | 2

How to Create Flick Animations with CSS

Step 4

Styling the #film div

The first styling (beside the body style) is the outer #film div which will be used to hold the static frame 12 as a background image.

/* center the image for Internet Explorer */
body {
  text-align:center; 
  font-family: tahoma, verdana, arial, sans-serif; 
  font-size:76%; 
  color:#aaa;
  }
/* center the outer div */
#film {
  margin:0 auto 0 auto;
  }
/* set the outer div size and background image */
#film {
  position:relative; 
  width:220px; 
  height:120px; 
  background:transparent url(../images/f1.jpg) no-repeat;
  }

‡ Style 1

The position:relative; it's necessary to enable us to place images within this div using position:absolute;

If you have Internet Explorer you will see the frame images stacked vertically down the center of the screen with the 'Style 1' wording beneath. Any other browser will have the wording partially hidden beneath the first frame. The is because Internet Explorer expands the div to contain all the images whereas other browsers allow the images to flow outside of the div (other browsers being correct).

Step 5

Getting rid of the images

/* get rid of the images and text */
#film a b {
  display:none;
  }
#film a img, #film a:visited img {
  display:none;
  }

‡ Style 2

You should now see just the initial frame 12 as a static image.

Step 6

Adding the links

Here, we have an eleven frame animation we need to divide the image vertically into eleven equal strips. The initial image, fortunately, is 220px wide (calculated beforehand) which will divide up into equal strips of 20px wide.

With this information we can add a general style for ALL the links as follows.

/* set the general styling for all the links */
#film a, #film a:visited {
  position:absolute; 
  top:0; 
  width:20px; 
  height:120px; 
  z-index:100; 
  cursor:default;
  }

‡ Style 3

Nothing new to see.

Step 6

Adding the individual link styles

We can now add the individual link information such as the background frame image and it's absolute left position over the initial static image.

To show you where these link strips are located I have initially set the background color to shades of gray. This would normally be transparent to allow the static image to show through.

/* set the individual link frame information */
#film a#f1 {
  left:0; 
  background:#444 url(../images/f1.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f2 {
  left:20px; 
  background:#555 url(../images/f2.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f3 {
  left:40px; 
  background:#666 url(../images/f3.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f4 {
  left:60px; 
  background:#777 url(../images/f4.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f5 {
  left:80px; 
  background:#888 url(../images/f5.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f6 {
  left:100px; 
  background:#999 url(../images/f6.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f7 {
  left:120px; 
  background:#aaa url(../images/f7.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f8 {
  left:140px; 
  background:#bbb url(../images/f8.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f9 {
  left:160px; 
  background:#ccc url(../images/f9.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f10 {
  left:180px; 
  background:#ddd url(../images/f10.jpg) 0 -300px no-repeat; 
  z-index:100;
  }
#film a#f11 {
  left:200px; 
  background:#eee url(../images/f11.jpg) 0 -300px no-repeat; 
  z-index:100;
  }

‡ Style 4

You should now see a series of vertical gray stripes indicating the position of the links over the initial static image. The links are all have the same z-index of 100. It's important to note this for future hover styling. The background image for each frame is placed out of sight using a negative position larger than the size of the image.

Step 7

Adding the :hover state

Before we do this it is necessary to change the above 'Step 6' styling to remove the gray scale background colors and make them all transparent.

The :hover styling is the part that does all the work. Not only does it move the background 'link frame' image to make it visible, it also resizes the link to the full width of the initial image and hides it from view. Next, it moves the 'link frame' image to a z-index of 50 placing it beneath all the other 'link frames' which will remain at a z-index of 100 so that they are still available for hover.

/* resize and reposition the links on hover */
#film a#f1:hover, 
#film a#f2:hover, 
#film a#f3:hover, 
#film a#f4:hover, 
#film a#f5:hover, 
#film a#f6:hover, 
#film a#f7:hover, 
#film a#f8:hover,
#film a#f9:hover,
#film a#f10:hover,
#film a#f11:hover {
  width:220px; 
  left:0; 
  background-position:0 0; 
  z-index:50; 
  }

‡ Style 5

...and there you have it. Scan your mouse from left to right to 'Flick Animate' the image.

Flick Animation should work in all the latest browsers AND Internet Explorer 5.01 onwards

Created: March 27, 2003
Revised: April 21, 2005

URL: http://webreference.com/programming/css_animation/1