How is this scrolling effect done

Freeway
#1

Have a look at this header graphic that scrolls, seemingly endlessly.

Script/protaculous are in there but how is it done to produce the endless effect?

http://www.jp-commercialkitchens.co.uk/index.asp

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

#2

This header graphic is done in Flash. They have lots of other
JavaScript stuff on hand, but that part’s all Flash.

Walter

On Nov 28, 2008, at 6:04 PM, DeltaDave wrote:

Have a look at this header graphic that scrolls, seemingly endlessly.

Script/protaculous are in there but how is it done to produce the
endless effect?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

#3

Here’s one way to do this in JavaScript. First, decide how wide your
scene will appear on the screen. For this example, it’s going to be
500px by 300px tall. Next, make an image to pan over. In this example,
my overall image was 1000px wide. Now add another 500px to the right
side of the canvas, and duplicate the left-most 500px of image into
it, so you end up with enough picture to duplicate the starting
“frame” on the right-most edge. If your overall canvas was 1000px, as
mine, then the result will be 1500px wide. If your image was wider,
then it would be whatever width plus 500px.

In my example, I didn’t bother with trying to cover my tracks where
one side ended and the other began, but this would be a cool effect to
use with a panoramic photo – imagine the view spinning slowly around
the center pivot, and you never know where it begins and ends.

For the layout, draw an HTML box the width you want the frame to be
(500px). While it’s still highlighted, change the Overflow setting to
hidden. Then draw an image box over the top of the HTML box, so it
becomes a child of that box (cursor will change to [+] while you are
drawing. Using the inspector, make the image box position at 0,0 top/
left, and make its height 300px and its width 1500px. (It will “stick
out” of the right side of its parent HTML box, but this will be hidden
when you view in a browser or use Preview.) In this example, the image
is called harbor, be sure to set that in the Title field in the
Inspector.

Now, the script (and hey, just for variety, no Prototype included).

<script type="text/javascript" charset="utf-8">
	var h = document.getElementById('harbor');
	var start = 0;
	function fx(){
		switch(start){
			case 1000:
				h.style.left = 0;
				start = 0;
				break;
			default:
				h.style.left = '-' + (start + 1) + 'px';
				start = (start + 1);
				break;
		}
		window.setTimeout(fx,30);
	}
	fx();
</script>

Things you need to adjust to fit your layout:

  1. document.getElementById('harbor') change the ID to suit your
    layout.
  2. case 1000: make this the width of your main image, minus the
    extra part devoted to the wrap-around effect. If your image was 2000px
    wide, and you added 700px to the right to make up for your starting
    frame, then you would make this read case 2000:
  3. window.setTimeout(fx,30); the number 30 indicates the number of
    milliseconds between frames of the animation. Smaller numbers equal a
    faster scroll, higher numbers equal slower. Beyond a certain point
    either way it will start to look bad, so experiment, and test on a
    number of different grades of machine.

Crude example here: http://scripty.walterdavisstudio.com/endless

Walter

On Nov 28, 2008, at 8:58 PM, Walter Lee Davis wrote:

This header graphic is done in Flash. They have lots of other
JavaScript stuff on hand, but that part’s all Flash.

Walter

On Nov 28, 2008, at 6:04 PM, DeltaDave wrote:

Have a look at this header graphic that scrolls, seemingly endlessly.

Script/protaculous are in there but how is it done to produce the
endless effect?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

#4

Thanks Walter - I will have a play with that

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

#5

Thanks again Walter - it works great.

The only thing Walter didn’t mention was where to add the Javascript

Page>HTML Markup and then choose Before - that worked for me

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

#6

Hi,

I know this is an old thread, but it’s exactly what I was looking for. I just have a question about the speed. I want to make the speed of the animation higher but even when I put: }
window.setTimeout(fx,1);
}
the animation is to slow. Is there an other way to make it faster?

Thank you,
Bart

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

#7

Time to consider HTML5.

Hype 3 Pro is a great solution. I use it extensively for personalizing the sites for our retailers. Among many other things (including JS) it provides excellent support for responsive content, working right alongside Freeway.

Scrolling is a simple as specifying a stage size, dropping start and stop keyframes and set it to loop

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options