Помогите разобраться с MagicScroll и TweenMax

Question

Ранее не юзал MagicScroll и TweenMax, инструкция у них крайне куцая, поэтому сам не смог реализовать задуманное, если кто понимает в данных плагинах, помогите, пожалуйста, разобраться.

Задача следующая: Есть родительский контейнер, назовем его parrent-wrapper, он позиционируется на все окно по ширине и высоте, внутри него 3 контейнера слоя(layer-1, layer-2, layer-3), они тоже занимают всю ширину и высоту, и лежат друг на друге(внутри них изображения с альфа слоями).

Нужно: при скролинге, зумировать контейнеры (layer-1, layer-2, layer-3), с разным значения зума, и при определенном увеличении убрать у всех видимость и уже отобразить блоки сайта(шапку, тело и так далее).

Объясню по другому, чего хочу добиться: я хочу на стартовом окне, при скролинге, создать эффект объема(входа в пространство) и потом все плавно увести в opacity 0 и отобразить контент сайта. Как реализовать данную задачу?

Answer 1

все нашел тут. Примеры хорошо отображают суть.

по сути код будет примерно такой:

// инициализация
        var ctrl = new ScrollMagic.Controller();

        var timeline = new TimelineMax();



        timeline
            .to("#fw-layer-3", 3.5, {scale: 2, opacity: 0.3, ease: Power4.easeInOut}, "-=4")
            .to("#fw-layer-2", 4, {scale: 1.8, "background-position-y": 0, ease: Power4.easeInOut}, "-=4")
            .to("#fw-layer-1", 4, {scale: 1.1, "background-position-y": -100, "background-position-x": 70, ease: Power4.easeInOut}, "-=4")

        // Создаем сцену
        $("#forest-wrapper").each(function() {

            new ScrollMagic.Scene({
                duration: '200%',
            })
                .setTween(timeline)
                .setPin(this)
                .addTo(ctrl);
        });

<div id="forest-wrapper">
    <div id="fw-layer-3" class="fw-element">

    </div>
    <div id="fw-layer-2" class="fw-element">

    </div>
    <div id="fw-layer-1" class="fw-element">

    </div>
</div>

БЛОГ НА HUSL

Помогите разобраться с MagicScroll и TweenMax

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