(34) ScrollRevealで簡単アニメーション

(1) プログラムを入手

こちら(↓)の公式サイトを参照のこと。
https://scrollrevealjs.org/

(2) 簡単サンプルを作成

出来上がったサンプルはこちら。
https://hp.dogrow.net/sample/00034
ページをスクロールすると、各画像の出現時にそれぞれアニメーションします。
画像1: 回転
画像2: フェードイン&拡大
画像3: 右から左へシフト

1) index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
img{
	display: block;
	margin-bottom:500px;
}
</style>
</head>
<body>

<img id="block1" src="./img1.png">
<img id="block2" src="./img2.png">
<img id="block3" src="./img3.png">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="./scrollreveal.min.js"></script>
<script src="./myscript.js"></script>

</body>
</html>

2) myscript.js

補足1: reset=falseにすると、ページ表示後1回だけアニメーションする。
補足2: ScrollReveal実行時に指定したオプションは、配下の全オブジェクトに適用される。

window.sr = ScrollReveal({ reset: true });

var opt_sr1 = {
	scale: 1,
	distance: 0,
	opacity: 1,
	rotate: { x: 0, y: 0, z: -360 },
	duration: 1000,
	delay :500
};
var opt_sr2 = {
	scale: 0.1,
	distance: 0,
	opacity: 0,
	duration: 1000,
	delay :500
};
var opt_sr3 = {
	scale: 1,
	distance: 0,
	opacity: 1,
	origin: 'right',
	distance: '500px',
	duration: 3000,
	delay :500
};

sr.reveal('#block1', opt_sr1);
sr.reveal('#block2', opt_sr2);
sr.reveal('#block3', opt_sr3);

(3) その他のオプション

いろいろと組み合わせれば面白いイフェクトが得られる。
詳細は Githubを参照のこと。
https://github.com/jlmakes/scrollreveal
※オプションのデフォルト値もこちらを参照のこと。

参考サイト

https://scrollrevealjs.org/ :公式サイト
https://www.merges.co.jp/demo/scrollreveal.php :いろいろな使い方を紹介してくださっています。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です