- 記事公開日
scrollReveal.jsがうまく動かない原因とその対策
scrollReveal.jsを使ってるんだけど、一回目の読み込みのときだけアニメーションが動かなかったり、スマホ（iPhone）だとうまく動かないときがあるの。パソコンで見た時はちゃんと動くのに・・・
何か良い対策はない？
ありがちな原因は以下の３つです。
１．画像が重すぎる
２．viewFactor（アニメーションを開始するために表示が必要な要素の割合）の値が大きすぎる
３．オプションを書く位置が悪い（HTMLの一番最後がベスト）
それでも直らない場合は、scrollReveal.jsを使わずにjQueryとCSSアニメーションを使って、オリジナルのコードを書いてしまいましょう。
その方が軽量だし、確実だし、自由度も高いです。
今回はそのサンプルを紹介しますね、意外と簡単ですよ。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>DEMO</title>
<!-- jQuery -->
<script src='js/jquery.min.js'></script>
<script>
$(function() {
// 画面の高さを取得
var window_height = $(window).height();
// スクロールしたときに実行
$(window).on("scroll", function() {
// スクロールの座標を取得
var scroll = $(window).scrollTop();
// 指定する要素
var arr = [
"dog",
"boy",
"girl",
];
// 該当要素をループで検索
$.each(arr, function(i, val) {
// デバッグ用（座標ステータスの表示）
var scroll_y = scroll+ window_height;
$('#status').html('スクロールのY軸/bottom座標：' + scroll_y + '<br>' + '犬のY軸/top座標：' + $('#dog').offset().top + '<br>' + '男のY軸/top座標：' + $('#boy').offset().top + '<br>' + '女のY軸/top座標：' + $('#girl').offset().top + '<br>');
// スクロール値 ＋ 画面の高さ ＋ 要素の高さ ＝ 要素が画面内に入った瞬間を検知
if(scroll+ window_height - $('#' + val).height() > $('#' + val).offset().top) {
$('#' + val).addClass(val + '_anime');
return true;
}
});
});
});
</script>
<style>
#container {
padding:10vh 0;
text-align:center;
}
#dog {
width:10vh;
height:auto;
margin:50vh 0 1.5em;
}
.dog_anime {
animation-name:dog_motion;
animation-fill-mode:forwards;
animation-duration:1s;
animation-delay:0.5s;
}
@keyframes dog_motion {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
#boy {
width:20vh;
height:auto;
margin:50vh 0 0em;
transform: translateX(300px);
}
.boy_anime {
animation-name:boy_motion;
animation-fill-mode:forwards;
animation-duration:1s;
animation-delay:0.5s;
}
@keyframes boy_motion {
0% {
transform: translateX(300px);
}
100% {
transform: translateX(-300px);
}
}
#girl {
width:20vh;
height:auto;
margin:50vh 0 0;
}
.girl_anime {
animation-name:girl_motion;
animation-fill-mode:forwards;
animation-duration:1s;
animation-delay:0.5s;
}
@keyframes girl_motion {
0% {
transform: translateY(0px);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-90deg) translateX(200px);
}
}
#status {
position:fixed;
top:1em;
right:1em;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<div>↓↓↓ 下にスクロール ↓↓↓</div>
<div>
<img src="image/dog.png" id="dog">
<p>大きくなる</p>
</div>
<div>
<img src="image/boy.png" id="boy">
<p>右から左へ移動</p>
</div>
<div>
<img src="image/girl.png" id="girl">
<p>回転して上に移動</p>
</div>
<div id="status"></div>
</div>
</body>
</html>