animate a div when we scroll to a specific position

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.

Leave a Comment

Your email address will not be published.

Scroll to Top