Блог

Главная - Вопросы по программированию - Анимировать div при прокрутке до определенной позиции

Анимировать div при прокрутке до определенной позиции

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть функция, которая уменьшает ширину slider-side-hr до 0 при прокрутке от верхней части страницы до -600 scrolling div высоты (что означает до достижения нижней части scrolling 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>

Он работает отлично, и ширина обоих slider-side-hr уменьшается до 0 при прокрутке, но у меня проблема, когда scrolling div он НЕ находится в верхней части страницы.

Мне нужно условие, которое выполняет функцию ТОЛЬКО тогда, когда ( scrolling div ) достигает нижней части страницы 100px , что означает, что сначала я вижу slider-side-hr всю ширину (с 100px scrolling div height помощью ), затем она начинает уменьшаться до 0 при прокрутке, и она должна уменьшаться до 0 при достижении половины страницы 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>

Ответ №1:

Как работает этот код:

JS

Берет информацию о местоположении сверху #tower2 и присваивает ее переменной ftop

Из ftop мы вычитаем значение прокрутки. Когда это значение становится меньше 0, начинается передача нового значения .slider-side-hr в.

Начальное значение ширины .slider-side-hr устанавливается равным 50% от ширины #tower2

Если вы хотите изменить скорость «анимации»… измените эту строку:

var newSize = zeroSizeWidth scl; для этого var newSize = zeroSizeWidth scl * 2;

(Если вы хотите, чтобы анимация была адаптивной для настольных и мобильных устройств, вы можете задать значение * 2 в процентах от ширины экрана)

CSS

Внесенное изменение имеет значение класса .slider-side-hr width: 100%;

Надеюсь, я был полезен

 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>

Комментарии:

1. Большое вам спасибо! Точно, с небольшими изменениями: var ftop = $scrollingDiv.offset().top - (window.screen.height / 2); var zeroSizeWidth = 250; width: zeroSizeWidth "px",

2. Я рад, что смог вам помочь 🙂