How to Create Flick Animations with CSS | 3

How to Create Flick Animations with CSS

But we don't need to stop there.

Using the basic idea above we can give Flick Animation a little more style.

Instead of scanning the image, which obscures some of the animation, we can allocate an area beneath the image and restrict our initial 'link frame' area to this. We can also use this area to display the associated text.

Enhanced Method

Step 8

Creating an area beneath the initial image

All that is necessary for this is to change the #film style to increase the height of the and give it a background color.

/* set the outer div size and background image */
#film {
  position:relative; 
  width:220px; 
  height:160px; 
  background:#000 url(../images/f1.jpg) no-repeat;
  }

Style 6

We now have a black area 40px high beneath the image, but the links still hover over the image.

Step 9

Moving the links to beneath the image

To do this we need to resize our initial link area to reduce the height to cover the bottom 20px of the 40px area and the top value to 140px (20px beneath the image which is 120px high).

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

Again, I have temporarily set the background colors of the links to gray scales so that their position is visible, this would normally be transparent.

Style 7

Now you should be able to scan across the gray squares only but the 'link images' can move down to this bottom area.

Step 10

Moving the hover images back into place

The hover styling now needs to be altered to move the hover position back to top:0; and increase the height from 20px back to the full height of 160px (image height + bottom border height).

/* 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;
  height:160px;
  top:0;
  left:0; 
  background-position:0 0; 
  z-index:50; 
  }

Style 8

I have now removed the gray backgrounds and replaced them with the correct transparent ones.

We can now scan the black area beneath the image and see the images aligned correctly at the top of the outer div.

Step 11

Adding the text

Let's add some text beneath the static image to give instructions on scanning the image.

<div id="film" title="Flick animation">
<a id="f1" href="#nogo"><img src="../images/f1.jpg" title="frame 1" alt="frame 1" /><b>FRAME 1</b></a>
<a id="f2" href="#nogo"><img src="../images/f2.jpg" title="frame 2" alt="frame 2" /><b>FRAME 2</b></a>
<a id="f3" href="#nogo"><img src="../images/f3.jpg" title="frame 3" alt="frame 3" /><b>FRAME 3</b></a>
<a id="f4" href="#nogo"><img src="../images/f4.jpg" title="frame 4" alt="frame 4" /><b>FRAME 4</b></a>
<a id="f5" href="#nogo"><img src="../images/f5.jpg" title="frame 5" alt="frame 5" /><b>FRAME 5</b></a>
<a id="f6" href="#nogo"><img src="../images/f6.jpg" title="frame 6" alt="frame 6" /><b>FRAME 6</b></a>
<a id="f7" href="#nogo"><img src="../images/f7.jpg" title="frame 7" alt="frame 7" /><b>FRAME 7</b></a>
<a id="f8" href="#nogo"><img src="../images/f8.jpg" title="frame 8" alt="frame 8" /><b>FRAME 8</b></a>
<a id="f9" href="#nogo"><img src="../images/f9.jpg" title="frame 9" alt="frame 9" /><b>FRAME 9</b></a>
<a id="f10" href="#nogo"><img src="../images/f10.jpg" title="frame 10" alt="frame 10" /><b>FRAME 10</b></a>
<a id="f11" href="#nogo"><img src="../images/f11.jpg" title="frame 11" alt="frame 11" /><b>FRAME 11</b></a>
</div>
<p><- Scan here from left to right -></p>

This text can be positoned beneath the static image using the following style.

#film p {
  position:absolute; 
  margin:0; 
  bottom:5px; 
  left:0; 
  width:220px; 
  text-align:center; 
  color:#fff;
  }

Style 9

The text appears beneath the image and stays on screen whilst scanning.

Step 11

Adding the frame text

We can place the associated frame text beneath each frame image in the same way so that it will appear on hover.

This text will show in the space between the image and the static scanning instruction text.

/* add the frame text beneath the image on hover */
#film a:hover b {
  display:block; 
  position:absolute; 
  bottom:25px; 
  left:0; 
  width:220px; 
  text-align:center; 
  color:#ff0; 
  font-weight:normal;
  }

Style 10

Finally, we've placed the scanning area beneath the image, added the initial instruction text, and above this, written the individual frame text which changes as you scan.

Which brings me to the end of this article.

As in my previous articles, they are so many ways that this basic method can be styled, so how you use it is up to you. In my case, I've used this method for page navigation on my site.

One Last Comment

If you use Internet Explorer 6 as your browser, your background images might not be cached. If so, you may experience flickering while scanning these images. If you are permitted to upload .htaccess files then add the following few line to this file and place it in your root directory or the directory containing your Flick Animated HTML files.

ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

This will have the effect of forcing image files to persist in the browser's cache for 30 days and as such should stop the flicker.

Good luck and happy flicking.

About the Author

Stu's website documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with JUST CSS--no javascript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!] http://www.stunicholls.myby.co.uk/

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

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

How to Create Flick Animations with CSS | 3