Animate a div when we scroll to a specific position

user_14559436 0
Viewed 293

I have a function that decrease the width of the slider-side-hr to 0 when scrolling from the top of the page to -600 of the scrolling div height (which means before reaching the bottom of the scrolling div).
The slider sides are both fixed, one to right and the other to the left.

  <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>

It works perfectly fine and the width of both slider-side-hr decreasing to 0 when scrolling, but I have a problem when the scrolling div is NOT on the top of the page.

I need a condition that executes the function ONLY when (scrolling div) reaches the bottom of the page + 100px, which means I can see the slider-side-hr full width first (with 100px of the scrolling div height) then it starts to decrease to 0 on scrolling, and it should decrease to 0 when reaching half of the scrolling div 

var $scrollingDiv = $("#tower2");
$(window).scroll(function() {

    var winScrollTop = ($(document).scrollTop() + 0);
    var zeroSizeHeight = $scrollingDiv.height() - 600;
    var newSize = 250 * (1 - (winScrollTop / zeroSizeHeight));
    
        $('.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: 250px;
    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>

<dic class="container-full">
  <div class="tower" id="tower1">
  </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>

css html jquery javascript
1 Answers

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>

user_109681340
Related