ActivePresenter Saola Animate Pricing Download

Fast vs. Slow scroll of objects

(Shawn Si) #1

Problem: Can we change the speed with which objects scroll? Making it scroll faster or slower than rest of objects on a page?

For eg using a script like below? Not sure this is exactly the right one, but perhaps helps move in the right direction.

  • Block
    • Scroll down speed
    • Scroll up speed

var thing = $(’#smallBox’);

var extra = 100;

var old = $(thing).scrollTop();

$(thing).scroll(function() {

if ($(thing).scrollTop() < old) {

$(thing).scrollTop($(thing).scrollTop()-extra);

} else if ($(thing).scrollTop() > old) {

$(thing).scrollTop($(thing).scrollTop()+extra);

}

old = $(thing).scrollTop();

hex = ($(thing).scrollTop()%4096).toString(16);

$(thing).css(‘background-color’,’#’+hex);

});

Thanks

Varying visible portion of an image
(Toan Le) #2

Hi Shawn,

Please provide a sample page or video so that I can understand what you mean.

Your script just scrolls the object a constant amount (100px) each time the scroll event occurs, and set its background color based on the scroll position.

Regards

(Shawn Si) #3

Sorry, my script is not accurate then. In the image below the woman in the image above and the pink block overlay are moving at different speeds, it seems. that is the effect i am looking for.

you can see the website at as.ouiwill.com

(Toan Le) #4

Hi Shawn,

You can use the parallax scrolling technique which uses scroll event to control the animation:

  1. Set scene Overflow to Auto or Scroll in Properties > Scene tab.
  2. Insert content outside the scene so that the scene is scrollable
  3. Create animation as normal. In this sample, I just animate the clipping top property of the mask.
  4. Clear Autoplay option in Document pane so that the animation doesn’t play automatically.
  5. Add Run JavaScript action to scene Scroll event to control the timeline.

scroll2.saolapack (44.0 KB)

If you use wheel event instead of scroll event, you can ignore step 1 and step 2 (because this event occurs regardless of the scrollbars).

Regards

(Shawn Si) #5

Solved on my own so need to post.

(Shawn Si) #6

Upon closer inspection, I believe the answer you provided, solves another problem but I still have a question with this one.

It seems you are suggesting that we trigger an animation based on when the screen reaches a certain point to achieve the fast and slow scroll effect. Is that correct? If so, that would not work, as once the animation is triggered it will “play” till the end of the timeline head, correct?.

What we want is not to trigger an animation, but to have the object move fast or slowly totally synchronized with the finger / scroll movement. If the finger moves a little, it should move a little. We don’t want to trigger an animation that goes all the way.

Is there a way to achieve this synchronous movement of the object with scrolling?

Thanks!!!

Shawn

(Toan Le) #7

Hi Shawn,

You didn’t see the attached sample, right?
In that sample, the animation is synced with with the scroll position.
Of course, with JavaScript, you can do both: sync or trigger.

Regards