scroll-slide | Flexible and pure-js scrollable slides maker | Carousel library

How this code works:

JS

Takes information about the location from top of #tower2 and assigns it to the variable ftop

From ftop we subtract the scrolling value. When this value becomes less than 0, the transmission of a new value to .slider-side-hr begins.

The initial value of the width of .slider-side-hr is set to 50% of the width of #tower2

If you want to change the "animation" speed ... change this line:

var newSize = zeroSizeWidth + scl; to this var newSize = zeroSizeWidth + scl * 2;

(If you want the animation to be responsive for desktop and mobile you can make the value * 2 to be a percentage of the screen width)

CSS

The change made is of class .slider-side-hr value width: 100%;

I hope I've been helpful