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.
