Scroll Reveal
サイトのコンテンツが右や左そして下から上からふわっと現れるようにしたい、出来ればプラグインを使わない方法があればと思って色々探してたらあった「Scroll Reveal」で試して出来たことをご紹介いたします。ワードプレスでテーマはSWELLでの説明となります、このテーマ結構気に入っています。
目次
コードをheadタグに貼る！
ミッション１
カスタマイスにある「高度な設定」のheadタグ終了直前に出力するコードに
<script src="https://unpkg.com/scrollreveal"></script>をコピペ、推奨でバージョンが上がると自動でそっちに更新しちゃうので気になる人は
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>をコピペしてください。<head></head>に収めればいいのかな。
jsにコードを貼って編集！
ミッション２
下記のコードをJSで編集します。
ScrollReveal().reveal('.headline');{
});.headline の部分は任意です。
例えば・・・
アニメの例（コピペ可）！
ミッション ３
//左から現れる
ScrollReveal().reveal('.madika1', {
duration: 2600, // アニメーション完了にかかる時間
origin: 'left', //要素をどこから始めるか
distance: '50px',// 移動する距離
reset: true // フレームインの度に動かすか
});
//右から現れる
ScrollReveal().reveal('.madika2', {
duration: 2600, // アニメーション完了にかかる時間
origin: 'right', //要素をどこから始めるか
distance: '50px',// 移動する距離
reset: true// フレームインの度に動かすか
});
//上から現れる
ScrollReveal().reveal('.madika3', {
duration: 2600, //アニメーション完了にかかる時間
origin: 'top', //要素をどこから始めるか
distance: '50px',// 移動する距離
reset: true// フレームインの度に動かすか
});
//下から現れる
ScrollReveal().reveal('.madika4', {
duration: 2600, //アニメーション完了にかかる時間
origin: 'bottom', //要素をどこから始めるか
distance: '50px',// 移動する距離
reset: true// フレームインの度に動かすか
});
//回転縦
ScrollReveal().reveal('.madika5', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
rotate: { x: 180, y: 0, z: 0 }, // 回転の設定
reset: true // フレームインの度に動かすか
});
//回転横
ScrollReveal().reveal('.madika6', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
rotate: { x: 0, y: 180, z: 0 }, // 回転の設定
reset: true // フレームインの度に動かすか
});
//フェードイン外へ
ScrollReveal().reveal('.madika7', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
scale: 0.1, // 表示前のサイズ 0.1 なら 0.1倍
reset: true // フレームインの度に動かすか
});
//フェードイン内へ
ScrollReveal().reveal('.madika8', {
delay: 300, // アニメーション開始までの時間
duration: 1600, // アニメーション完了にかかる時間
scale: 2, // 表示前のサイズ 2 なら 2倍
reset: true // フレームインの度に動かすか
});
//ふわっと
ScrollReveal().reveal('.madika9', {
delay: 800, // アニメーション開始までの時間
duration: 2600,// アニメーション完了にかかる時間
reset: true // フレームインの度に動かすか
});↓↓ でこんな感ぢ↓↓
NO! IMAGE!!で
ご確認ください。
オプションの種類を少し紹介と最後に！
ミッション ４
スクロールできます
| distance | 移動する距離 | ‘rem’, ‘%’, ’vw’, etc |
| duration | アニメの時間 | 単位はmilliseconds |
| delay | アニメ実行までの待機時間 | 単位はmilliseconds |
| opacity | 実行前の不透明度 | 0~1 |
| scale | 実行時の要素の大きさ | 1で100％ |
| mobile | モバイル端末でも対応する？しない？ | true, false |
| desktop | ディスクトップ端末でも対応する？しない？ | true, false |
| reset | フレームインで要素繰り返しする？しない？ | true, false |
| viewFactor | 要素実行のタイミング | 0~1(0.1= 10%) |
| rotate | 要素を回転させながら表示 | x: 0,y: 0,z: 0 |
| easing | アニメの動き | ease（初期値）/linear/ease-in/ease-out/ ease-in-out/cubic-bezier(x,x,x,x) |
| interval | インターバルの時間 | 単位はmilliseconds |
こういうツールって英語が結構あるけど英語ワケワカメなのはとても大変です、英語くらいは理解してないといけないなと言う事が初老を迎えて分かりました。語学は大事ですね！ 組み合わせ技も出来るみたいなので色々試してみて下さい。良かったらコピペして使って下さいね。「不備があればすみませんとみさかはみさかは先にあやまっておきます。（笑）」
