スクロール量に応じて可視範囲に入ったら
http://tobiasahlin.com/moving-letters/#16
のような動きを実装したいのですが、下記コードだとスクロールするたびに表示されたりと変な挙動になります。
どなたか解決策をご教示ください。。。
お願いします。
// Wrap every letter in a span
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('.ml16').each(function(){
var objectPosition = $(this).offset().top;
if(topWindow > objectPosition - windowHeight + 200) {
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
anime.timeline({loop: false})
.add({
targets: '.ml16 .letter',
translateY: [-150,0],
easing: "easeOutExpo",
duration: 2000,
delay: function(el, i) {
return 30 * i;
}
}).add({
/targets: '.ml16',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000/
});
}
});
});