3

I'm looking for a way to slow down scrolling between two specific pixels, for example 1 to 100 from the top. Would that be possible in any way?

Here's a link to a website that have that feature I'm looking for. http://goo.gl/isH5o0

When you start scrolling the dark blue overlay div disappears using CSS3 Translate3d, but then the scroll seems to stop or go really slow, which makes the underlying div not scroll to far at the same time the overlay div slides up.

Can someone please give me a hint of what technique to use to accomplish this or maybe help me with some code.

DrMtotheac
  • 127
  • 3
  • 8

2 Answers2

1

I think that there's nothing special with the scroll on that page, just the divs moving using 3d transforms. But if you want to achieve special effects with scroll, you can use the jQuery animate function:

$('html').animate({scrollTop: position-to-scroll}, 300, 'ease-in');

More about animate.

Oscar Paz
  • 18,084
  • 3
  • 27
  • 42
0

It may be using disable scrolling. I noticed that if i drag the scroller on the right hand side of the window it is uneffected by the "slowing" however the mouse scroll is. This is similar to the effect of the demo described here How to disable scrolling temporarily? .. at a point you can temporarily disable the scroll and then re enable it to stop them going too far down

Community
  • 1
  • 1
clancer
  • 613
  • 4
  • 10