ScrollMagic Закрепить и выявить проблему

Я пытаюсь приостановить изображение на некоторое время. После небольшой прокрутки изображение (часть 1) должно исчезнуть и показать основное изображение. После дополнительной прокрутки оба должны прокрутиться.

Я использую http://janpaepke.github.io/ScrollMagic, но каким-то образом сочетание закрепления и анимации просто сделано. не работает.

<body>
<script>
    var controller;
    $(document).ready(function($) {     
        controller = new ScrollMagic();
    });
</script>

<div id="trigger1"></div>
<section>   
    <img id="part1" src="img/part1.jpg" height="950" width="" />
    <img id="part2" src="img/part1.jpg" height="950" width="" />
</section>

<div class="spacer s10"></div>
<div id="trigger2"></dv>

<script>
    $(document).ready(function($) {

        var scene = new ScrollScene({triggerElement: "#trigger1", duration: 1600})
                        .setPin("#part1")
                        .addTo(controller);

        var scene = new ScrollScene({triggerElement: "#trigger2"})
                        .setTween(TweenMax.to("#part1", 2, {opacity: 0}))
                        .addTo(controller);

        // show indicators (requires debug extension)
        scene.addIndicators();
    });
</script>
</body>

jquery scrollmagic
person Mike    schedule 22.09.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если вы используете только первое изображение в качестве цели закрепления, будет закреплено только первое изображение. (да)
Это приводит к тому, что второе изображение будет проталкиваться вниз, пока булавка не будет завершена.

Для достижения описанного эффекта вам необходимо закрепить контейнер (в вашем случае раздел) обоих изображений. Затем затемните изображение, как и следовало ожидать. Обязательно установите первое изображение как position: absolute и поднимите z-index.

надеюсь, это поможет,
J

person Jan Paepke    schedule 06.10.2014