Я сейчас пробую 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 );
});