ScrollMagi c Sequence - PullRequest
Новая
       16

ScrollMagi c Sequence

0 голосов
/ 13 марта 2020

Я сейчас пробую ScrollMagi c на веб-сайте, который я разрабатываю.

Содержит видео, которое воспроизводится при прокрутке, а текст появляется и исчезает в определенных точках.

Это самый удобный способ сделать это? (Создание сцены для каждый элемент, который исчезает в / из? на основе смещения?)

  • Код: 
    /**
     *  Fade In
     */
    var tl1 = new TimelineMax();
    tl1
    .to( '.animate-iq-1', 1, {opacity:1})
    .to( '.animate-iq-2', 2, {opacity:1})

    var scene2 = new ScrollMagic.Scene({
        duration: 200,
        offset: 700,
        triggerElement: '.animate-sequence-1',
        triggerHook: 0
    })
    .setTween( tl1 )
    .addTo( controller );

    /**
     *  Fade Out
     */
    var tl2 = new TimelineMax();
    tl2
    .to( '.animate-iq-1', 1, {opacity:0})
    .to( '.animate-iq-2', 2, {opacity:0})

    var scene3 = new ScrollMagic.Scene({
        duration: 1500,
        offset: 2000,
        triggerElement: '.animate-sequence-1',
        triggerHook: 0
    })
    .setTween( tl2 )
    .addTo( controller );

    /**
     *  Fade In
     */
    var tl3 = new TimelineMax();
    tl3
    .to( '.animate-iq-3', 1, {opacity:1})
    .to( '.animate-iq-4', 1, {opacity:1})

    var scene4 = new ScrollMagic.Scene({
        duration: 800,
        offset: 200,
        triggerElement: '.animate-sequence-2',
        triggerHook: 0
    })
    .setTween( tl3 )
    .addTo( controller );
});
...