DETAIL NOTE

INTUITION DETAIL DESIGN BLOG

アニメーションエフェクト「Block Reveal Effects」

最近よく見かけるサイトで、いいなと思った要素の動き方があったので調べてみました。

今回、紹介するWebアニメーションは「Block Reveal Effects」です。
どんなものかというと、

非表示にしている要素を、スクロール時に左右から表示させる仕組みになります。

Block Reveal Effectsをダウンロード



https://tympanus.net/codrops/2016/12/21/block-reveal-effects/

codropsページに「Download source」ボタンがありますので、データをダウンロードできます。ダウンロードしたデータの中から今回使用するのは下記になります。

index.html
js
・anime.min.js
・main.js
・scrollMonitor.js

Block Reveal Effectsのセットアップ方法

プラグインの設置

まず、「anime.min.js」「main.js」「scrollMonitor.js」をサイトの下部に設置します。

ソース上の設定

次に、HTMLのソース上で、アニメーションさせたい要素にid=”title01”を追加します。

jsの設定

上の画像のように左からアニメーションさせてみます。

ソース上で追加したid名を上記のtitle01部分に入力します。
その後でアニメーション時の背景色と速度を設定します。
・bgcolorの箇所で背景色
・durationの箇所で速度
これで、jsの設定は完了です。

ちなみに、アニメーション箇所を追加する場合は、
上部のコードを複製し、「scrollElemToWatch_1」「title01」「watcher_1」「rev1」の部分の数字を2や3と変更します。

また、右からアニメーションさせるときは、revealSettings内に「direction: ‘rl’,」を追加するだけです。

cssの設定

cssの設定もすごく簡単です。
下記のコードを追加するだけ。

これで全ての設定が完了です!

当サイトのトップページにも実装してますのでご確認ください。
https://idd.tokyo/

対応ブラウザ

IE10〜
Safari ver.11.0
Chrome ver.61.0
Firefox ver.56.0
では、ちゃんと動作確認できました。

次へ 投稿

© 2022 INTUITION DETAIL DESIGN