Project Management

Stupid Web Tricks: Mysterious scrolling

Here's a trick that will allow you to automatically scroll a selected region of your Web page.

Click here for our complete list of Stupid Web Tricks.

By Holly Cunningham

Back in the day when sci-fi flicks required five minutes of large-type scrolling exposition that took half a minute to read, did you ever look at it and think, "Man, someday I'll be able to do that myself"? Did you imagine that someday, technology would let you reproduce almost exactly the look and feel of a '70s health-class filmstrip, replete with the spastic pacing of "Johnny Moves His Lips When He Reads," on your very own Web site? Or did you yearn instead to let the masses scroll over that fixed starfield at their own leisurely, hey-I-didn't-catch-that-last-sentence pace? Did you dare to dream that big? No? Well, neither did we. But fortunately for us, there were brave visionaries who looked straight into the yearning maw of the future and came up with scrolling text and fixed backgrounds.

Roll it: auto-scrolling region

You're the director! Make your readers scramble and risk eyestrain to keep up with the pace car. We've shown you how to make whole pages scroll themselves, but now you can apply that effect to a selected region. This trick requires a CSS2-compliant browser to display properly.

Put this script into the <head> of your Web page. Click here.

Paste this HTML, with your Hammer-films narrative, wherever you want it in the <body>. Adjust the width, height, background image, padding, and color to suit your whim. Click here.

Here's your joystick back—thanks for the loaner

Want viewers to have a shot at the controls, so as not to humiliate the Evelyn Wood Reading Academy dropouts? Use a fixed image for the background and scrollbar-controlled floated text so the baby-not-so-fast cadre can peruse at their leisure. Or simply use it for the clean look that it imparts to a text-heavy page. It just takes this bit of CSS in the <head>:

<style type="text/css"><!—
body {background-image:url("hotel.jpg");
background-attachment:fixed;}
—></style>

You can also play with the background-position and background-repeat properties. For example, try adding background-position:center; and background-repeat:no-repeat; to the style block. This is the orthodox, practical way to put watermarks on a Web page without resorting to DHTML. Also, using background-position without background-repeat:no-repeat lets you control where the image tiles from, and we know how you like to control.

The CSS text weaponry is with you! Go on and create your galaxies far, far away.

Holly Cunningham, a frequent contributor to CNET Builder.com, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

Editor's Picks

Free Newsletters, In your Inbox