Animer un div lorsque l'on fait défiler l'écran à une position spécifique

Question

J'ai une fonction qui diminue la largeur de l'écran de l'ordinateur. slider-side-hr à 0 lors du défilement du haut de la page jusqu'à -600 de la scrolling div hauteur (c'est-à-dire avant d'atteindre le fond de la scrolling div ).
Les côtés du curseur sont tous deux fixes, l'un à droite et l'autre à gauche.

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

Cela fonctionne parfaitement bien et la largeur des deux slider-side-hr diminuant à 0 lors du défilement, mais j'ai un problème lorsque la scrolling div es PAS en haut de la page.

J'ai besoin d'une condition qui exécute la fonction UNIQUEMENT lorsque ( scrolling div ) atteint le bas de la page + 100px ce qui signifie que je peux voir le slider-side-hr d'abord en pleine largeur (avec 100px de la scrolling div height ), puis il commence à diminuer jusqu'à 0 lors du défilement, et il devrait diminuer jusqu'à 0 lorsqu'il atteint la moitié de l'échelle de l scrolling div

Merci beaucoup <3

**NOTE:**
C'est ce que j'essaie de faire :
Allez sur : https://www.apple.com/macbook-pro-16/
Faites défiler jusqu'à :
*Écran Rétina*

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>

Answer 1

Comment ce code fonctionne :

JS

Prend des informations sur l'emplacement du haut de #tower2 et l'affecte à la variable ftop

De ftop on soustrait la valeur du défilement. Lorsque cette valeur devient inférieure à 0, la transmission d'une nouvelle valeur à .slider-side-hr commence.

La valeur initiale de la largeur de .slider-side-hr est fixé à 50% de la largeur de #tower2

Si vous voulez changer la vitesse de l'"animation" ... changez cette ligne :

var newSize = zeroSizeWidth + scl; à ce var newSize = zeroSizeWidth + scl * 2;

(Si vous souhaitez que l'animation soit réactive pour les ordinateurs de bureau et les téléphones portables, vous pouvez définir la valeur suivante * 2 qui doit être un pourcentage de la largeur de l'écran)

CSS

La modification apportée est de classe .slider-side-hr valeur width: 100%;

J'espère que j'ai été utile

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>