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
var $scrollingDiv = $("#tower2");
var ftop = $scrollingDiv.offset().top;
var zeroSizeHeight = $scrollingDiv.height();
var zeroSizeWidth = $scrollingDiv.width() / 2;
$(window).scroll(function () {
var winScrollTop = $(window).scrollTop();
var scl = ftop - winScrollTop;
if (scl < 0) {
var newSize = zeroSizeWidth + scl * 2;
} else {
var newSize = zeroSizeWidth;
}
$('.slider-side-hr').css({
width: newSize,
}, 500, 'easeInOutSine');
});.container-full {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.tower {
position: relative;
}
#tower1 {
/*margin-bottom: 700px*/
}
#tower2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 140vh;
background-attachment: fixed;
position: relative;
overflow: hidden;
}
.slider-side-hr {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #ddd;
}
.slider-side1 {
left: 0;
}
.slider-side2 {
right: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container-full">
<div class="tower" id="tower1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui
impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab?
Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat
possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure
assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga
amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque
in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam
fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam
itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus
ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto
doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita
architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium
expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit.
</div>
<div class="tower" id="tower2">
<div class="scroll-slider-hr">
<div class="slider-side-hr slider-side1"></div>
<div class="slider-side-hr slider-side2"></div>
</div>
</div>
</div>CLICK HERE to find out more related problems solutions.