webpack (BigCommerce) 中的 Scrollmagic 视频动画

Question

我正在尝试使用 scrollmagic 实现视频动画。

期望的结果是，视频根据用户滚动位置播放。

export default function magic() {
//MAIN
var controller = new ScrollMagic.Controller();

// SceneOne animation
    const $video = $('#soVideo');
    let sceneOne = new ScrollMagic.Scene({
        duration: 9000,
        triggerElement: '#trigger1',
        triggerHook: 0
    })
        .setPin('#trigger1')
        .addIndicators()
        .addTo(controller);



        // SceneOne animation
        let accelamount = 0.1;
        let scrollpos = 0;
        let delay = 0;

        sceneOne.on('update', e => {
            scrollpos = e.scrollPos / 1000;

        });

        setInterval(() => {
            delay += (scrollpos - delay) * accelamount;

            $video.currentTime = delay;
            console.log(delay);
        }, 33.36); 
}

问题是，我无法让它工作，视频在滚动时保持静止。

我正在尝试为产品页面执行此操作，但不确定我做错了什么。

感谢任何提示！

Answer 1

好的，明白了。现在工作：

export default function magic() {

const intro = document.querySelector(".video-section");
const video = intro.querySelector('.video_zero');
const text = intro.querySelector('.intro-text');

var controller = new ScrollMagic.Controller();

// SceneOne animation
let sceneOne = new ScrollMagic.Scene({
    duration: 9500,
    triggerElement: intro,
    triggerHook: 0
})
    .setPin(intro)
    .addIndicators()
    .addTo(controller);



// SceneOne animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

sceneOne.on('update', e => {
    scrollpos = e.scrollPos / 1000;

});

setInterval(() => {
    delay += (scrollpos - delay) * accelamount;

    video.currentTime = delay;

}, 33.3);

}

webpack (BigCommerce) 中的 Scrollmagic 视频动画

Scrollmagic video animation in webpack (BigCommerce)

javascript

webpack

bigcommerce

scrollmagic