Блог

Главная - Вопросы по программированию - Запуск функции onscroll, когда определенный элемент находится в области просмотра / не поверх страницы — jsfiddle внутри

Запуск функции onscroll, когда определенный элемент находится в области просмотра / не поверх страницы — jsfiddle внутри

#javascript #jquery #gsap

#javascript #jquery ( jquery ) #gsap #jquery

Вопрос:

Я сделал эту параллаксную прокрутку.

Использование библиотеки tweenmax.

Прямо сейчас прокрутка рассчитывается для всей страницы, поэтому к тому времени, когда я дойду до элементов параллакса, они сильно переместятся, мне нужно начать вычислять прокрутку только после того, как родительский #wrap элемент перейдет в область просмотра.

HTML :

 <div class="asd"></div>
<div id="wrap">
  <div class="scroll-parallax-1 a"></div>
  <div class="scroll-parallax-2 b"></div>
  <div class="scroll-parallax-3 c"></div>
  <div class="scroll-parallax-4 d"></div>
  <div class="scroll-parallax-5 e"></div>
</div>

Скрипт :

 document.onscroll = function(){
  console.log(0.8*scrollY);
  TweenMax.set(".scroll-parallax-1", {y: 0.1*-scrollY });
  TweenMax.set(".scroll-parallax-2", {y: 0.2*-scrollY });
  TweenMax.set(".scroll-parallax-3", {y: 0.4*-scrollY });
  TweenMax.set(".scroll-parallax-4", {y: 0.7*-scrollY });
  TweenMax.set(".scroll-parallax-5", {y: 1.2*-scrollY });
}

Полный jsfiddle здесь

Как вы можете видеть, к тому времени, когда i #wrap переходит в режим просмотра, элементы уже находятся в сером .asd div

Есть какие-нибудь идеи?

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

1. Привет, Мартин. Вы используете действительно старую версию GSAP. Такого рода вещи тривиальны с использованием GSAP 3 и официального плагина прокрутки GSAP ScrollTrigger . Я настоятельно рекомендую вам ознакомиться с ними. На странице документов ScrollTrigger представлено несколько эффектов параллакса.

2. Спасибо за рекомендацию, я уже использовал [ github.com/locomotivemtl/locomotive-scroll ] (Прокрутка локомотива ) что, по вашему мнению, является лучшим решением для этой функции? Это или GSAP3? Он также имеет всевозможные триггеры, анимации и т. Д

3. Я провел некоторые повторные исследования, и ScrollTrigger от GSAP отлично работает с Locomotive scroll, поэтому кажется, что эта комбинация является идеальным решением. Еще раз спасибо за совет!

4. Я написал статью о технологиях прокрутки , в которой есть полезные диаграммы внизу. Я думаю, что ScrollTrigger — лучший инструмент для прокрутки (независимо от того, что я работаю в GreenSock), и если вам нужен аспект плавной прокрутки, вы можете объединить его с библиотекой, такой как Locomotive. GSAP 3 намного лучше, чем более старые версии GSAP.