在滚动上激活字母动画

我正在尝试在滚动上动画字母，而不是每x秒触发一次动画。我想按照元素的数量划分屏幕，并且每次到达触发字母动画的一个分区时。在滚动上激活字母动画

例如，如果您从25％的屏幕滚动到50％，则会从第2个跨度到第3个跨度（请参阅下面的HTML）触发动画。但是如果您从25％滚动到0％，则会从跨度2到跨度1做相反的动画。

感谢您的帮助！让我知道你是否需要更多细节。

代码：

HTML

<div class="container"> 
<div class="text"> 
    <p> 
    <span class="word">one</span> 
    <span class="word">two</span> 
    <span class="word">three</span> 
    <span class="word">four</span> 
    </p> 
</div> 
</div>

JQUERY

var words = document.getElementsByClassName('word'); 
var wordArray = []; 
var currentWord = 0; 

words[currentWord].style.opacity = 1; 
for (var i = 0; i < words.length; i++) { 
    splitLetters(words[i]); 
} 

function changeWord() { 
    var cw = wordArray[currentWord]; 
    var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1]; 
    for (var i = 0; i < cw.length; i++) { 
    animateLetterOut(cw, i); 
    } 

    for (var i = 0; i < nw.length; i++) { 
    nw[i].className = 'letter behind'; 
    nw[0].parentElement.style.opacity = 1; 
    animateLetterIn(nw, i); 
    } 

    currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1; 
} 

function animateLetterOut(cw, i) { 
    setTimeout(function() { 
     cw[i].className = 'letter out'; 
    }, i*80); 
} 

function animateLetterIn(nw, i) { 
    setTimeout(function() { 
     nw[i].className = 'letter in'; 
    }, 340+(i*80)); 
} 

function splitLetters(word) { 
    var content = word.innerHTML; 
    word.innerHTML = ''; 
    var letters = []; 
    for (var i = 0; i < content.length; i++) { 
    var letter = document.createElement('span'); 
    letter.className = 'letter'; 
    letter.innerHTML = content.charAt(i); 
    word.appendChild(letter); 
    letters.push(letter); 
    } 

    wordArray.push(letters); 
} 

setInterval(changeWord, 4000);

所以不是

setInterval(changeWord, 4000);

它应该是这样的：

$(window).scroll(function(){ 
     if($(window).scroll < $(document).height()/4){ 
     //the first span should have the class 'letter in'; 
     }else if($(window).scroll < ($(document).height()/4)*2){ 
      //the second span should have the class 'letter in'; 
     } 
    //etc... 
});

的Codepen：

http://codepen.io/Leprince/pen/NrqmEJ

来源

2016-06-07 Hook

你为什么不使用jQuery插件，如与动画CSS或scrollmagic

来源

2016-06-07 23:00:59

动画用于相当小元素的网页上，并wow.js我不想使用任何外部jquery插件来优化代码。 – Hook

在滚动上激活字母动画

回答

相关问题