Parallax скролл с отслеживанием количества скроллов

Question

Parallax скролл с отслеживанием количества скроллов

Рейтинг: 0Ответов: 1Опубликовано: 28.06.2023

Пытаюсь сделать анимацию такого рода: https://www.vidline.com/share/V04OHRAM2B/ab9f278fa1c7a692c6b68f60a166ed11, но совсем зависла над реализацией. Буду рада идеям)   Опишу логику анимаций:  

после первого скролла надпись «Камневеды» увеличивается, вместе с этим увеличиваем немного фон 
после второго скролла появляется заголовок с кнопкой, фон увеличивается сильнее, появляется оверлей градиент
После третьего скролла страницу можно листать как обычно, видно весь контент

 Какой алгоритм вижу я: 

Создаем блок с первой анимацией. Задаем background-image, задаем позицию fixed для фона.  2. Отслеживаем скролл и их количество. Если был первый скролл, при помощи скрипта увеличиваем фон и текст. 
Если был второй скролл, то создаем пустой див, ему задаем градиент (даем оверлей), ещё сильнее зумим фон + даём прежде скрытому тексту display: block вместо display: none 
Если был третий скролл, как-то даём странице скроллиться в обычном режиме

Основная проблема: видела подобные решения, но понятия не имею, как привязаться к тому, что блок должен быть неподвижен на двух скроллах и начнется прокрути к конвенту только после 3 скролла(  Если у кого-нибудь есть примеры подобных реализаций параллакса на скролле, буду благодарна! Гуглила, смотрела примеры на codepen, но всё не то

css html анимация parallax

Источник: Stack Overflow на русском

Answer 1

▲ 4Принят

Для создания подобных анимаций ребята из GreenSock создали замечательную библиотеку GSAP, вместе с плагином ScrollTrigger.
Благодаря им можно сделать то, что вам нужно, ниже накидал пример:

gsap.registerPlugin(ScrollTrigger);

gsap.to('.banner__bg', {
  scale: 1.2,
  scrollTrigger: {
    trigger: '.banner',
    start: 'center center',
    end: '+=200% center',
    scrub: true
  }
})

gsap.timeline({
    scrollTrigger: {
      trigger: '.banner',
      start: 'center center',
      end: '+=200% center',
      scrub: true,
      pin: true,
      markers: false,
    }
  })
  .to('.banner__text-title', {scale: 2, margin: '+=10% 0'})
  .to('.banner__section--primary', {yPercent: -100}, .5)
  .to('.banner__section--secondary', {yPercent: -100, opacity: 1}, .5)

body {
  background-color: #000;
  overflow: hidden auto;
  min-height: 100vh;
  margin: 0;
}

.banner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
}

.banner__bg {
  display: block;
  width: 50vw;
  height: 100vh;
  -o-object-fit: contain;
  object-fit: contain;
  position: absolute;
}

.banner__section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
}

.banner__section--secondary {
  opacity: 0;
}

.banner__section--secondary::after {
  content: '';
  display: block;
  width: 100%;
  height: 25vw;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

.banner__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.banner__text-title {
  font-size: 10vw;
  letter-spacing: 2vw;
  color: #fff;
  margin: 2vw 0;
}

.banner__text-slogan {
  font-size: 2vw;
  font-weight: 700;
  color: #ff6300;
}

.banner__text-desc {
  text-align: center;
  font-size: 4vw;
  line-height: 1.5;
  color: #fff;
  text-transform: uppercase;
}

.banner__text-link {
  display: block;
  border-bottom: 2px solid #ff6300;
  padding-bottom: 0.5vw;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5vw;
  text-decoration: none;
  position: absolute;
  top: 125%;
}

.catalog {
  height: 100vh;
}

.catalog h1 {
  color: #fff;
}

<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

<section class="banner">
  <img class="banner__bg" src="https://i.imgur.com/MAlywOm.png" />
  <div class="banner__section banner__section--primary">
    <div class="banner__text">
      <img class="banner__text-logo" src="https://i.imgur.com/tD4CO0P.png" width="32" />
      <div class="banner__text-title">КАМНЕВЕДЫ</div>
      <div class="banner__text-slogan">PREMIUM</div>
    </div>
  </div>
  <div class="banner__section banner__section--secondary">
    <div class="banner__text">
      <div class="banner__text-desc">
        Уникальные минералы,<br/>
        окаменелости, метеориты<br/>
        и изделия из камня
      </div>
      <a class="banner__text-link" href="#">Перейти в каталог</a>
    </div>
  </div>
</section>

<section class="catalog">
  <h1>Каталог</h1>
</section>

Почитайте документацию по ссылкам выше, если возникнут трудности, то на их форуме (англоязычный) вам ответят сами разработчики.

Parallax скролл с отслеживанием количества скроллов

Ответы