2

サイトのセクションをピン留めするときに Superscrollorama プラグインに少し問題があり、ピン留めされている間にアニメーションを実行した後、次のピン留めされたコンテンツが配置されるまで特定の要素をアニメーション化したい...

このセクション要素があるとします..

        <div id="prod_list">
        <div class="seccion amar prod1">
            <div class="prod_list_wrapper">
                <div class="elem1">1</div>
                <div class="botella"><img src="img/bott_fnd_granreserva.png" alt="Gran Juvé y Camps"></div>
                <div class="elem2">2</div>
                <div class="elem3">3</div>
            </div>
        </div>
        <div class="seccion rojo prod2">
            <div class="prod_list_wrapper">
                <div class="elem1">1</div>
                <div class="botella"><img src="img/bott_fnd_blancdenoirs.png" alt="Blanc de Noirs"></div>
                <div class="elem2">2</div>
                <div class="elem3">3</div>
            </div>
        </div>
        <div class="seccion amar prod3">
            <div class="prod_list_wrapper">
                <div class="elem1">1</div>
                <div class="botella"><img src="img/bott_fnd_milesime.png" alt="Milesime"></div>
                <div class="elem2">2</div>
                <div class="elem3">3</div>
            </div>
        </div>

ご覧のとおり、各「セクション」にはボトルの周りに同じ要素があります。私の JS コードは、セクションを固定し、.elem# div を移動してから、固定を解除して次のセクションを実行します..そして onUnpin と onPin の間で、要素が少しスクロールしたアニメーションを実行してフェードオフするようにしたいと思います上向き..

        var controller = $.superscrollorama();
        var pinDur = 1500;

        controller.pin( $('.prod1'), pinDur, {
            anim: (new TimelineLite())
                .append([
                    TweenMax.fromTo( $('.prod1 .elem1'), 1, 
                        {css:{top: 750, left:-100, opacity:0}, immediateRender:true}, 
                        {css:{top: 550, left:-100, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod1 .botella'), 1, 
                        {css:{top: 300, left:30, opacity:1}, immediateRender:true}, 
                        {css:{top: 0, left:30, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod1 .elem2'), 1, 
                        {css:{top: 250, left:100, opacity:0}, immediateRender:true}, 
                        {css:{top: 200, left:100, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod1 .elem3'), 1, 
                        {css:{top: 650, left:400, opacity:0}, immediateRender:true}, 
                        {css:{top: 500, left:400, opacity:1}, ease:Quad.easeOut})
                ]),
            onPin: function() { console.log('Pin prod1'); },
            onUnpin: function() {  console.log('unPin prod1'); }
            });

        controller.addTween( $('.prod1'),
            (new TimelineLite())
                .append([
                    TweenMax.fromTo( $('.prod1 .elem1'), .25, 
                        {css:{top:550}},
                        {css:{top:350, opacity:0}, ease:Quad.easeOut, onUpdate:function(){
                            console.log("!! " + $('.prod1 .elem1').css('top'));
                        }
                    }),
                    TweenMax.fromTo( $('.prod1 .elem2'), .25,
                        {css:{top:200}},
                        {css:{top:100}, ease:Quad.easeOut}
                        ),
                    TweenMax.fromTo( $('.prod1 .elem3'), .25,
                        {css:{top:500}},
                        {css:{top:400}, ease:Quad.easeOut}
                        )

                ]), 500, 0 );

        controller.pin( $('.prod2'), pinDur, {
            anim: (new TimelineLite())
                .append([
                    TweenMax.fromTo( $('.prod2 .elem1'), 1, 
                        {css:{top: 750, left:-100, opacity:0}, immediateRender:true}, 
                        {css:{top: 550, left:-100, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod2 .botella'), 1, 
                        {css:{top: 300, left:30, opacity:1}, immediateRender:true}, 
                        {css:{top: 0, left:30, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod2 .elem2'), 1, 
                        {css:{top: 250, left:100, opacity:0}, immediateRender:true}, 
                        {css:{top: 200, left:100, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod2 .elem3'), 1, 
                        {css:{top: 650, left:400, opacity:0}, immediateRender:true}, 
                        {css:{top: 500, left:400, opacity:1}, ease:Quad.easeOut})
                ]),
            onPin: function() { console.log('Pin prod2'); },
            onUnpin: function() {  console.log('unPin prod2'); }
            });

しかし、この addTween アニメーションを onUnpin 関数がオフになったときに正確にトリガーすることはできず、スクロールに敏感にすることもできません (onUnpin 関数からアニメーションを起動できますが、それは望ましい動作ではありません)。

私は何が欠けていますか？このアニメーションをピン間のスタックにプッシュする方法はありますか?

前もって感謝します！

4

0 に答える 0