Последовательность изображений в ScrollMagic - PullRequest
Новая
       85

Последовательность изображений в ScrollMagic

1 голос
/ 05 октября 2019

Я делаю параллакс с библиотекой 'ScrollMagic, и у меня есть проблема, потому что я хотел бы перейти к последовательности изображений - анимации - прокрутка раздела остановится, пока эта анимационная последовательность не закончится прокруткой. То есть прокрутка раздела останавливается, и прокрутка работает над последовательностью до ее завершения, чтобы я мог продолжить прокрутку раздела.

Кто-нибудь знает, как это можно сделать, чтобы заставить его работать? Код выглядит следующим образом (ссылка на библиотеки scrollMagic я не могу связать их абсолютно) 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Scrolls</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <style type="text/css">
        #pinContainer{width: 100%;height: 100%; overflow: hidden;}
        .panel{width: 100%;height: 100%;position: absolute;background-color: black;}
        .scroll-uno{z-index: 1;background-repeat: no-repeat;background-position: center center;background-size: cover;}
        .scroll-dos{position:fixed;top: 0; left: 0;background-color: blue;display: flex;flex-direction: column;justify-content: center;align-items: center;}
        .scroll-tres{background-color: yellow;}
        .bg-video{
            width: auto;
            min-width: 100%;
            height: auto;
            min-height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -100;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="pinContainer">
        <section id="parallax-1" class="panel scroll-uno" style="background-image:url('bg-image.jpg');">
           <!--
            <video id="video" class="bg-video" preload="auto" autoplay="autoplay" loop="loop" muted>
                <source src="#" type="video/webm" />
                <source src="#" type="video/mp4" />
            </video>
            -->
        </section>
        <section id="parallax-2" class="panel scroll-dos">
            <h1>aquí es</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro in dicta mollitia, recusandae, sint consequuntur rerum earum id quam, fugit laborum saepe assumenda. Laborum ipsam praesentium, eos aliquam veritatis iste!</p>
        </section>
        <section id="parallax-3" class="panel scroll-tres">
                <div id="trigger"></div>
                <div id="imagesequence">
                    <img id="myimg" src="img/example_imagesequence_01.png" />
                </div>
        </section>
    </div>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="js/animation.gsap.min.js"></script>
<script src="js/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script>
    $(function () { 
        // iniciar scroll magic
        var controller = new ScrollMagic.Controller();

        // definir movimiento de paneles
        var wipeAnimation = new TimelineMax()
            .fromTo(".scroll-uno", 1, {y: "0%"}, {y: "-100%", ease: Linear.easeNone}) 
            .fromTo(".scroll-dos",    1, {y:  "0%"}, {y: "-100%", ease: Linear.easeNone}) 
            .fromTo(".scroll-tres", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}); 

        // crear escena general
        new ScrollMagic.Scene({
                triggerElement: "#pinContainer",
                triggerHook: "onLeave",
                duration: "300%"
            })
            .setPin("#pinContainer")
            .setTween(wipeAnimation)
            .addIndicators() // agregar indicadores (requiere plugin)
            .addTo(controller);


        //definición imágenes bloque 2
        var images = [
            "img/example_imagesequence_01.png",
            "img/example_imagesequence_02.png",
            "img/example_imagesequence_03.png",
            "img/example_imagesequence_04.png",
            "img/example_imagesequence_05.png",
            "img/example_imagesequence_06.png",
            "img/example_imagesequence_07.png"
        ];
        var obj = {curImg: 0};
        var tween = TweenMax.to(obj, 0.5,
            {
                curImg: images.length - 1,  // animación
                roundProps: "curImg",       
                repeat: 3,                  // repetir 3 veces
                immediateRender: true,      // cargar automáticamente la primera imagen
                ease: Linear.easeNone,      // mostrar todas las imágenes en el mismo tiempo
                onUpdate: function () {
                $("#myimg").attr("src", images[obj.curImg]); // ruta de imagen
                }
            }
        );
        var controller = new ScrollMagic.Controller();
        // construir escena animación
        var scene = new ScrollMagic.Scene({
            triggerElement: "#trigger", 
            duration: 300
        })
        .setTween(tween)
        .addIndicators() 
        .addTo(controller);

    });
</script>        
</body>
</html>
...