I have a horizontal looping GeeWizz scroller, is there a way to have a seamless, continuous transition when it loops? without a gap?
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.
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.