@asede123

Увеличение/ уменьшение и смещение позиции элемента при скролинге?

Подскажите, как реализовать поведении элементов при скролинге, как в демо ( https://yadi.sk/i/O2B5R-xWr9xFmw ). Пока что есть мысли менять top и transform scale в js при событии скролла, но в полную картину всё сложить не могу. Надеюсь есть кто может объяснить подробно . Заранее спасибо )

Код в css:
.parallax {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: -1;
}

.parallax-list__item {
    display: none;
    position: absolute;
}


Код HTML:
<div class="parallax">
        <ul class="parallax-list">
            <li class="parallax-list__item" data-name="background">
                <img src="./image/background.png" alt="parallax-elem">
            </li>
            <li class="parallax-list__item" data-name="moscow">
                <img src="./image/moscow-city.png" alt="parallax-elem">
            </li>
            <li class="parallax-list__item" data-name="hero">
                <img src="./image/hero_back.png.png" alt="parallax-elem">
            </li>
            <li class="parallax-list__item" data-name="house_2">
                <img src="./image/house_2.png" alt="parallax-elem">
            </li>
            <li class="parallax-list__item" data-name="house_1">
                <img src="./image/house_1.png" alt="parallax-elem">
            </li>
            <li class="parallax-list__item" data-name="lighters">
                <img src="./image/lighters.png" alt="parallax-elem">
            </li>
            <li class="parallax-list__item" data-name="bridge">
                <img src="./image/bridge.png" alt="parallax-elem">
            </li>
        </ul>
    </div>
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ответы на вопрос 1
Seasle
@Seasle Куратор тега JavaScript
Помог - отметь решением \( ゚ヮ゚)/
Если не хотите придумывать всё с нуля, можно воспользоваться ScrollMagic и GSAP. В итоге таймлайн будет изменяться в зависимости от положения скролла на странице.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы