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

Question

[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>

Comments

[Пашенька]

Всё ведь на поверхности. Очевидно, что их положение(скейл или что угодно иное) зависит от того, на сколько прокручен документ, или насколько элемент попадает во вьюпорт. Выясняете эти моменты, используйте навыки написания пропорций, приобретённые на уроке математики в классе, например, 4-ом. Элементарщина. Но код придётся пописать.

Answer 1

[Александр]

Если не хотите придумывать всё с нуля, можно воспользоваться ScrollMagic и GSAP. В итоге таймлайн будет изменяться в зависимости от положения скролла на странице.