Question

我正在努力实现每次用户滚动到某个div时都会触发声音文件。

我尝试使用superscrollorama甚至航点来实现这一目标，但声音文件仅在页面加载时播放。

有什么想法吗？

谢谢！

以下是我的代码行（细分为基础知识）

HTML：

 <div id="trewrapper">
    <div id="tretest"></div>
    <div id="tretestsound"></div>
    <div id="tre_pin-frame-unpin" class=""></div>
 </div>

CSS

    #trewrapper {
    margin-right:60px;
    background-color: #000000;
    width: 100%;
    margin-bottom: -200px;
    min-height: 2500px;
}


#tretest {
    width: 100%;
    height: 200px;
    background-color: #fff;
    position: fixed;
    top: 1500px;
}

#tretestsound {
    width: 100%;
    height: 200px;
    background-color: #0FC;
    position: fixed;
    top: 1900px;
}

#tre_pin-frame-unpin {
     top:100%; 
}

JS：

    var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'http://mc-communicate.com/DEV/images/trelock/Trelock_Heartbeat.mp3');
        audioElement.setAttribute('autoplay', 'autoplay');
        //audioElement.load()
        $.get();
        audioElement.addEventListener("load", function() {
        audioElement.play();
        }, true);

var controller = $.superscrollorama({
            triggerAtCenter: false
        });
            // set duration, in pixels scrolled, for pinned element
                var pinDur = 2800;

                // create animation timeline for pinned element
                var pinAnimations = new TimelineLite();
                pinAnimations
                    .append([
                        TweenMax.to($('#tretest'), 5, {css:{top: 0}})
                        ])
                    .append([
                        TweenMax.to($('#tretestsound'), 2,{css:{top: 0}}, audioElement.play())
                        ])
                    .append(TweenMax.to($('#tre_pin-frame-unpin'), .5, {css:{top:'100px'}}));

                // pin element, use onPin and onUnpin to adjust the height of the element
                controller.pin($('#trewrapper'), pinDur, {
                    anim:pinAnimations, 
                    onPin: function() {
                        $('#trewrapper').css('height','100%');
                    }, 
                    onUnpin: function() {
                        $('#trewrapper').css('height','900px');
                    }
                });

Answer 1

我终于明白了。

我刚刚在动画开始之前的滚动元素之后调用了onComplete函数。

TweenMax.to($('#tre_schloss'), 5, {css:{opacity: 1},
    onComplete: function(){
         $(function() {                                         
           audioElement.play();
     })

这么容易;）

Superscrollorame在达到某个div时播放声音

1 个答案: