記事公開日

scrollReveal.jsがうまく動かない原因とその対策

お客さん

scrollReveal.jsを使ってるんだけど、一回目の読み込みのときだけアニメーションが動かなかったり、スマホ(iPhone)だとうまく動かないときがあるの。パソコンで見た時はちゃんと動くのに・・・

何か良い対策はない?

隊員1号

ありがちな原因は以下の3つです。

1.画像が重すぎる

2.viewFactor(アニメーションを開始するために表示が必要な要素の割合)の値が大きすぎる

3.オプションを書く位置が悪い(HTMLの一番最後がベスト)

それでも直らない場合は、scrollReveal.jsを使わずにjQueryとCSSアニメーションを使って、オリジナルのコードを書いてしまいましょう。

その方が軽量だし、確実だし、自由度も高いです。

今回はそのサンプルを紹介しますね、意外と簡単ですよ。

スクロールの位置に合わせて動くCSSアニメーション

DEMO

<!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>
この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

運営者プロフィール
運営者のプロフィール画像
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール