Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #170

I have a horizontal looping GeeWizz scroller, is there a way to have a seamless, continuous transition when it loops? without a gap?

The Answer

Prepared Oct. 2005 by Gerry Jacobsen, PVII

It's possible to create the illusion of seamless looping by adding duplicate content at the end of the scrolling content. This duplicate content will show until the scroller actually loops... covering the gap and making it look seamless.

The GeeWizz seamless looping example page shows this technique.

How to:

Here's a quick rundown of the steps to create a continuous horizontal scroller with GeeWizz:

1. Set up a looping horizontal scroller. In the example we made it 80px high and 470px wide.

3. Insert your images in the #p7s1content1 layer, but insert them twice, so that you have two sets of images, duplicates. In this example we have 4 images, twice, for a total of 8. Each image is 90px high and 118px wide.

2. Change the starting left position of the scroller to 0, in the setScroller behavior on the <body> onLoad.

3. Set the width of the #p7s1content1 to equal the width of all of the images, in the example there are 4 images repeating, twice. Each is 118px wide, for a total of 944px. This change is made manually in the <style> block.

That's it. The effect is an illusion, the scrolling layer resets to its starting position when it has scrolled 944px, but since the images are duplicated you really don't see the switch.

Back to the questions list