Анимация во время скролинга страницы на JS

Question

Помоги пожалуйста сделать анимацию во время скролинга страницы. Тоесть мне нужна анимация как на сайте (Второй блок где Fluid дисплей 90 Гц... и т.д.)
Как реализовать такое?

.li_spec {
  list-style-type: none;
}

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 20px
}

<ul>
  <li class="li_spec">Трассировка лучей</li>
  <li class="li_spec">Поддержка телевизоров с разрешением 4К</li>
  <li class="li_spec">До 120 кадров в секунду с поддержкой частоты вывода 120 Гц.</li>
  <li class="li_spec">Технология HDR</li>
  <li class="li_spec">Поддержка разрешения 8K</li>
</ul>

Answer 1

Если мы далеки от javascript то Вам как и мне приходят на помощь библиотеки, в этом примере покажу AOS которая проста до безумия и выполнит вашу задачу на 100%

Смотреть на весь экран

body {
  margin: 0;
}

.dummy {
  width: 100%;
  height: 80vh;
}

.flex {
  width: 100%;
  height: 120vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  text-align: center;
  font-size: 20px;
  overflow: hidden;
}

.text p {
  transform: translateX(100%);
  transition: 0.34s linear;
}

p.focus {
  transform: translateX(0%);
}

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

<div class="dummy"></div>
<div class="flex">
  <div class="text">
    <p data-aos="fade-left">Fluid дисплей 90 Гц</p>
    <p data-aos="fade-left">Qualcomm® Snapdragon™ 865 with 5G</p>
    <p data-aos="fade-left">Slim and Sleek Curved Design</p>
    <p data-aos="fade-left">48 MP Triple Camera</p>
  </div>
</div>

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
  AOS.init();
</script>

Answer 2

Например с использованием библиотеки Skrollr.

let el = document.querySelector('#anchor'),
    els = el.querySelectorAll('.li_spec'),
    elp = el.getBoundingClientRect();

els.forEach(function (e,i) {
    e.setAttribute('data-anchor-target', '#anchor');
  e.setAttribute('data-50p-top', 'transform:translateX(100%);opacity:0;');
  e.setAttribute('data-'+Math.floor(40-(10*i))+'p-top', 'transform:translateX(0%);opacity:1;');
});

skrollr.init();

body {margin: 0;}
section {display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden;}
#anchor {background: black; color: white;}
ul {margin: 0; padding: 0; list-style: none; text-align: center;}
ul > li {font-size: 100%;}
ul > li:not(:last-child) {margin-bottom: 1.5em;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>

<section>листай вниз</section>

<section id="anchor">
  <ul>
    <li class="li_spec">Трассировка лучей</li>
    <li class="li_spec">Поддержка телевизоров с разрешением 4К</li>
    <li class="li_spec">До 120 кадров в секунду с поддержкой частоты вывода 120 Гц.</li>
    <li class="li_spec">Технология HDR</li>
    <li class="li_spec">Поддержка разрешения 8K</li>
  </ul>
</section>

UPD: переписал под relative mode, теперь это стало чуть проще и адаптивно.

БЛОГ НА HUSL

Анимация во время скролинга страницы на JS

Ответы (2 шт):