Endless auto scroll

1

I am trying to animate this template. I need it to scroll continuously and at the same time the GIF to stick at the top after scrolling (so we can see the GIF). Any help would be great! I have been working on this for awhile and am stuck. Here is the only code I am using:

<script>
var scrollDirection = 2, pageScroll;
pageScroll = function() {
window.scrollBy(0,scrollDirection); // horizontal and vertical scroll increments
scrolldelay = setTimeout(pageScroll,5); // scrolls every 100 milliseconds
if ( (window.scrollY === 0) || (window.innerHeight + window.scrollY) >= document.body.offsetHeight) 
{
}
}
pageScroll();
</script>

and here is the file GIF.zip (1.0 MB)

2

It looks like the scrolling is working for me, so is the only remaining part to make the GIF sticky? If so, you can add this to your Head HTML:

<style>
.sticky {
	position: fixed !important;
}
</style>

And then on the Symbol element, give it a class name of sticky.

3

Hi Jonathan. Thank you for your reply. Yes the scrolling is working. Now about the GIF, I gave a class name to the element:

<div class="sticky"> Foo box </div>

but still the GIF doesn't stick to the top. However I kept the "Fox boo" text and that appears to stick on the top. Would be grateful if you can help me.

thanks

4

He mentions the Symbol element. Did you put the class name on that. I’m assuming the element contains the GIF.

5

Hi DBear. Yes, I put the class inside the GIF (see image attached). Thank you

Screen Shot 2017-04-04 at 14.40.03.png1211×746 245 KB

6

You must enter the class name “sticky” in the “Identitiy” pane of the inspector for that element. NOT inside the element.

GIF Hype 3, Today at 13.45.49.png818×526 64.5 KB

2 Likes
7

Oh great! it works! thank you so much DBear. Cheers!