Плавное изменение зафиксированного контента при scroll по примеру

Question

Имеется конкретный пример реализации. Сайт: 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 имеет height: 100vh (высоту всей страницы). При скролле на этот блок, сначала просто отображается первый блок content А далее, если мы скроллим вниз, img и описание первого блока затухает (opacity: 0) и постепенно отображается img и описание второго элемента.

с помощью matrix создается ощущение "появления" текста с под низу (или верху, в зависимости от скролла).

Нужна помощь в реализации js. Спасибо!

Answer 1

Просто получаете сколько пикселей от верхнего уровня экрана прокручено относительно блока, к которому добавили position: relative (в котором position: sticky) через getboundingclientrect()

Затем каждые новые Х пикселей делаете изменения через JS (например,

вешаете класс на элемент, который меняет изображение в смартфоне (background-image)
делает наушники видимыми, opacity
меняет размер наушников, transform: scale()
двигает текст, transform: translateY()
меняет его видимость, opacity

Выглядит очень просто. Но требует некоторого времени, так что писать код не буду. Надеюсь чем-то помог.

БЛОГ НА HUSL

Плавное изменение зафиксированного контента при scroll по примеру

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