3,976 views
この記事は最終更新から 2427日 が経過しています。
(1) プログラムを入手
こちら（↓）の公式サイトを参照のこと。
https://scrollrevealjs.org/
(2) 簡単サンプルを作成
出来上がったサンプルはこちら。
https://www.dogrow.net/hp/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 ：いろいろな使い方を紹介してくださっています。