Имеется конкретный пример реализации.
Сайт:
https://www.apple.com/airpods-pro/
Блок о котором идет речь:
При прокрутке этого блока, меняется плавно изображение и текст.
Именно этот эффект я хочу повторить.
Опишу более детально что именно нужно:
При скролле, создается ощущение, что блок зафиксирован и меняется только текст и изображение (причем, плавно, в зависимости от скролла, меняется opacity и transform: matrix)
Если я правильно понимаю, у нас следующая структура html:
<div class="section-scroll">
<div class="content">
<p>Описание блока #1</p>
<img src="slide1.jpg">
</div>
<div class="content">
<p>Описание блока #2</p>
<img src="slide2.jpg">
</div>
</div>
Получается: .section-scroll .content имеет height: 100vh (высоту всей страницы)
Но отображается только первый content, второй остается скрытым
При скролле на этот блок, сначала просто отображается первый блок content
А далее, если мы скроллим вниз, img и описание первого блока затухает (opacity: 0) и постепенно отображается img и описание второго элемента.
+ с помощью matrix создается ощущение "появления" текста с под низу (или верху, в зависимости от скролла).
