縦長にデザインされたサイトで、スクロールするとフェードインしたり震えたりジャンプしたりいろいろ動いてクリックを誘導するデザインはポピュラーですよね。
よく使うものなので、簡単に使いまわせるように関数を作ってみました。
サンプル
codepen
使用するライブラリ
animate.cssは、要素に様々なエフェクトを与えるCSSのみで書かれたライブラリ。headで読み込んで、動かしたい要素にclassを割り当てるだけで動いてくれるびで、とても便利です。
今回のサンプルでは、bounce(跳ねる)、pulse(膨らんでしぼむ)、swing(揺れる)、fadeIn（フェードイン）の4つを使ってみましたが、animate.cssの配布元サイトには数十にも及ぶエフェクトのサンプルが用意されています。
html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-xs-12">
<h1>Please scroll ↓↓↓</h1>
<p class="ani-bounce">bounce</p>
<p class="ani-pulse">pulse</p>
<p class="ani-swing">swing</p>
<p class="ani-fadeIn">fadeIn</p>
</div>
</div>
</body>
</html>
CSS
h1{
margin-bottom: 800px;
}
p{
font-size: 24px;
text-align:center;
padding: 60px 30px;
margin: 90px 180px;
border: 5px solid #CCCCCC;
background-color:#FFFFFF;
}
JavaScript
function animate($ani, $valPos) {
if ($ani === 'fadeIn') {
$(".ani-" + $ani).css("opacity", "0");
}
$(".ani-" + $ani).each(function() {
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos - windowHeight + windowHeight / $valPos) {
$(this).addClass("animated " + $ani);
} else {
$(this).removeClass("animated " + $ani);
}
});
}
jQuery(window).on('touchstart scroll', function(){
//timerID;
var timer = false;
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
animate('bounce','3');
animate('fadeIn','7');
animate('pulse','5');
animate('swing','5');
}, 100);
});
スクロール量に応じて引数に指定したanimate.cssのclassを付与したり外したりする関数animate()を、scroll(touchstart)イベントの中で呼び出しています。
scrollイベントはブラウザに負荷がかかるってことで、setTimeout()を使って負荷を減らす処理を入れてみました。
参考にさせていただきました。
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法｜Webpark
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle