Scrolling simply
April 23, 2010 at 7:33 PM by Dr. Drang
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.