2017-03-06 8 views
0

ページ内の特定のポイントをスクロールしたときにトリガーしたいアニメーションがいくつかあります。スクロールの機能をトリガーする方法

scrollTopプロパティでアニメーション関数を呼び出すための正しい構文がないと思います。私は警告でそれをテストし、それは正常に働いた。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'security', 'passcode']; 
var illust; 

function addListenerToElement(e, anim){ 
    document.getElementById(e).addEventListener('mousedown', function() { 
    anim.play(); 
    anim.addEventListener('complete', function(){anim.goToAndStop(0,true)}); 
    } 
)}; 

function buildIllus(){ 
for(var i=0;i<illustArr.length;i+=1){ 
    illust = document.getElementById(illustArr[i]); 
    var params = { 
     container: illust, 
     autoplay: false, 
     loop: false, 
     animationData: animations[illustArr[i]], 
     renderer: 'svg' 
    }; 

    var anim = bodymovin.loadAnimation(params); 

    illustArr.forEach(function (e) { 
     addListenerToElement(e, anim) 
     }) 
} 
}; 

window.onscroll = function() {myFunction()}; 

function myFunction() { 
if (document.body.scrollTop > 50) { 
    anim.play 
}} 

buildIllus(); 

おかげ

答えて

0

たぶんanim.play()からanim.playを変更?

function myFunction() { 
    if (document.body.scrollTop > 50) { 
     anim.play(); // this line 
    } 
} 
関連する問題