Как реализовать анимацию при скролле?

Question

[Антон Плашкевич]

Здравствуйте, есть несколько блоков а именно

<div class="1st">
<div>111</div>
<div>111</div>
</div>

<div class="2nd">
<div>111</div>
<div>111</div>
</div>

<div class="3rd">
<div>111</div>
<div>111</div>
</div>

Суть в том чтобы при скролле на второй блок, появлялось облаков и скролилось до конца данного блока. Я понимаю так что я должен window.onscroll отловить данный элемент , но что бы его отловить в данном диве нужно выщитывать высоту скролла? И дальше анимировать при помощи gasp? Если можно найти другой способ подскажите или дайте статейку почитать на этот случай, буду признателен.

Answer 1

[MrStan1slav]

Пример: https://jsfiddle.net/MrStan1slav/4fe5buxy
Можно без отлавливания кол-ва прокрученных пикселей узнать, доскролил ли пользователь до элемента с помощью getBoundingClientRect():
https://developer.mozilla.org/ru/docs/Web/API/Elem...
https://learn.javascript.ru/coordinates
scrollTo() - Скролл на определённое кол-во пикселей от начала страницы:
https://developer.mozilla.org/ru/docs/Web/API/Wind...
scrollBy() - Скрол на определенное кол-во пикселей от исходного положения:
https://developer.mozilla.org/ru/docs/Web/API/Wind...
В scrollTo() встроен механихм плавной анимации, а scrollBy нужно анимировать с помощью setInterval()
Анимация scrollBy() для плавной прокрутки: jsfiddle.net/MrStan1slav/0uvrawz3
Бонус: https://learn.javascript.ru/onscroll