How to make slow scrolling?

Question

css

You need to scroll like this in the example https://dribbble.com/shots/3756332-Hermitage-Galle...
Namely, at the moment with "Latest Events" with horizontal scrolling, each previous block moves a little slower than the next.

Answer 1

It seems to me that they do not move slower, and at the beginning of scrolling between blocks, the distance increases, and at the end it decreases to the original one.

Answer 2

Smooth scrolling (jquery plugin) manos.malihu.gr/repository/custom-scrollbar/demo/e... and yes, the example shows that the distance between the blocks (the margin attribute, for example) increases with the speed of scrolling. You can determine the scroll speed as follows: in JS, hang a scroll event (window.onscroll), and at each event read the scrollWidth / Height (scroll amount) and the time stamp to milliseconds ( new Date().getTime() ) and compare with previous values ​​( i.e. store them in variables, and update after comparison). Then we divide the displacement change by the time interval, we get the speed. We multiply the speed by a factor and add the resulting value to the margin of the block class.