Scrolling simply

I’m not an HTML/CSS tips kind of blogger, but I was testing some new design ideas for my company’s web site today, and I ran across simplyScroll by Logicbox. It’s very nice as is, and you can easily improve it.

SimplyScroll is a jQuery plugin that takes a series of images—all of which must be the same width, a minor restriction—and turns them into a continuously scrolling band of images. I wanted to see if I could make a header like that overlaid with my company’s logo on a semi-transparent background. After a few miscues, and a review of the CSS rules for absolute and relative positioning, I got it working in a simple single HTML page. Here’s the same basic thing embedded in a post.

The trick to getting the static images to overlay the scrolling part lies in wrapping all those parts in a <div> that uses relative positioning with no offsets. Then you use absolute positioning to put the semi-transparent white block and the logo with the transparent background on top of the scroller. Here’s the HTML document with embedded CSS that does the trick.

 1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 2:    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 3:  <html>
 4:  <head>
 5:   <title>Scrolling example</title>
 6:   <script type="text/javascript" 
 7:   src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
 8:   </script>
 9:   <script type="text/javascript" src="jquery.simplyscroll.js"></script>
10:   <link rel="stylesheet" href="jquery.simplyscroll.css" media="all" 
11:   type="text/css">
12:  
13:   <script type="text/javascript">
14:   (function($) {
15:     $(function() { //on DOM ready
16:         $("#scroller").simplyScroll({
17:             autoMode: 'loop'
18:         });
19:     });
20:   })(jQuery);
21:   </script>
22:  
23:   <style type="text/css">
24:   div#title {
25:     position: relative;
26:     width: 40em;
27:   }
28:   img#logo {
29:     position: absolute;
30:     top: 10px;
31:     left: 10px;
32:     z-index: 10;
33:   }
34:   img#logo-bg {
35:     position: absolute;
36:     top: 0px;
37:     left: 0px;
38:     z-index: 9;
39:     opacity: 0.75;
40:   }
41:  
42:   </style>
43:  </head>
44:  <body>
45:    <p>Above</p>
46:    <div id="title">
47:      <ul id="scroller">
48:         <li><img src="scroll1.jpg" width="160" height="120"></li>
49:         <li><img src="scroll2.jpg" width="160" height="120"></li>
50:         <li><img src="scroll3.jpg" width="160" height="120"></li>
51:         <li><img src="scroll4.jpg" width="160" height="120"></li>
52:         <li><img src="scroll5.jpg" width="160" height="120"></li>
53:         <li><img src="scroll6.jpg" width="160" height="120"></li>
54:         <li><img src="scroll7.jpg" width="160" height="120"></li>
55:       </ul>
56:       <img id="logo-bg" src="white.png" width="200" height="120">
57:       <img id="logo" src="colorlogo.png">
58:     </div>
59:     <p>Below</p>
60:  </body>
61:  </html>

Normally I don’t embed CSS, but it’s often easier to do it that way when you’re experimenting with something new.

The z-index values I chose for the white background and the logo were large enough to ensure that the images were placed above the scroller rather than under it. I don’t know what the minimum values are.

If you’d like to play around with this on your own machine, download this zip file, and expand it in a convenient place on your hard drive. Everything you need is in the archive (you don’t need a local jQuery library because it uses one hosted at Google). Just open the scroll.html file and start hacking.