0

私は長い単一ページの Web サイトを作成し、ScrollMagicJS v1.3.0 を使用してイベントをトリガーし、いくつかの要素を固定します。ページを下にスクロールするときに、さまざまなトランジション効果を作成したいと考えています。

これは、私のサイトの水平スクロールを再現する jsfiddleです。

scrollControl = new ScrollMagic({
    vertical: false,
});

var myScrollScene = new ScrollScene({
    triggerHook: 0,
    offset: 0,
    triggerElement: '#shot-0-1',
    duration: '100vw',
    pushFollowers: true
})
    .setPin('#shot-0-1')
    .addTo(scrollControl);

たとえば、ページ間のフェードからブラック、フレアからホワイト、クロス ディゾルブのトランジションを作成したいと考えています。

HTML5 トランジションの基本原則の一部、ある画像を別の画像に溶解させる方法は理解していますが、ScrollMagic スクロールを使用してそれを行う賢い方法を見つけることができませんでした。

私が検討したこと: 次のページが現在のページの下にスライドし、ScrollMagic トリガーを使用して不透明度 1.0 から 0 に移行しますか?

しかし、ハックではなく、ScrollMagic のフレームワークと一致する方法でそれを行うにはどうすればよいでしょうか?

4

2 に答える 2

0

これが私が解決した解決策です。

scrollControl = new ScrollMagic({
    vertical: false,
});

vw = $(window).width();
console.log("width:" + vw + "px");

// pin frame 2
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    triggerElement: '#shot-2',
    // This pin is considerably longer than average
    offset: 0,
    // duration = stickyLength + disolve_duration
    duration: 1.5 * vw + 'px'
})
    .setPin('#content-2', {
        pushFollowers: false
    })
    .addTo(scrollControl)
    .addIndicators({
    zindex: 100,
    suffix: 'pin2'
});

//  move frame 3 up early and pin it
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    triggerElement: '#shot-2',
    offset: 0,
    // duartion = 1.5, but why?
    duration: 1.5 * vw + 'px'
    // the faux pin doesn't actually expand the container the way SM does
    // so the results are a little strange
})
    .on("start end", function (e) {
        $('#content-3').css({left: 0, position:'fixed'});
    })
    .on("enter leave", function (e) {
        $('#content-3').css({left: 0, position:'relative'});
    })
    .addTo(scrollControl)
    .addIndicators({
        zindex: 100,
        suffix: 'pin3faux'
    });

var dissolve = TweenMax.to('#content-2', 1, {
    autoAlpha: 0
});

// dissolve frame 2 to frame 3
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    // Note that though we are fading frame 2, we are
    // using the arrival of frame 3 the trigger
    triggerElement: '#shot-2',
    // The sets the rapidity of the dissolve
    // offset = stickyLength
    offset: 0.33 * vw + 'px',
    // The sets the rapidity of the dissolve
    duration: 1 * vw + 'px'
})
    .setTween(dissolve)
    .addTo(scrollControl)
    .addIndicators({
        zindex: 100,
        suffix: 'dissolve'
    });

ピンと z-index で pushFollowers: false を使用して、最初のフレームの後ろに次のフレーム (これも固定されています) をスライドさせました。次に、Tween を 2 番目のフレームにディゾルブします。その結果、長さを調整できる優れたシネマティック ディゾルブ機能が得られます。

それが他の人に役立つことを願っています。

https://jsfiddle.net/wmodes/b4gdxeLn/

于 2015-04-24T07:46:50.930 に答える