スクロールしたらCSS3のグラフがアニメーションするようにする方法
『アニメーションするグラフを作ってくれ』と言われてしました。
知らない間にアニメーションの需要が出てきているんですね。
少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。
たしかにアニメーションするグラフは見栄えが良いし、
企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。
ちょっとリッチなページ、ひと目を引くページ作成で
アニメーションをいれてくれと言われることが増えるのでしょうね。
FLASHを通っていないのでアニメーションの基礎勉強もやらなくてはならずその場その場で対応していくしかないのでしょう。
やることが多すぎて困ります。
さて、今回のお題である「アニメーションするグラフ」
WEBページでアニメーションするグラフを作るにあたり2019年現在では
グラフをつくるためのjavaScriptライブラリが充実しています。
Chart.jsなどが有名で使いやすいです。
テンプレは用意されているので,javaScriptを読みこみ必要な数値を入れていくだけでグラフが完成するので
非常に便利で楽チンです。
ただ今回は「オリジナリティ」を出してほしいと言われたため
javaScriptライブラリを使うのを控えました。
javaScriptライブラリはテンプレが決まっているので
デザイン変更できる幅が狭いんです。
そのため今回は「CSS3でアニメーショングラフ」を作ることにしました。
「CSS3でアニメーショングラフ」の例は検索していくといくつか事例が見つかりますが、
困ったのはウィンドウ表示外にあるグラフがアニメーションしていなかった……。
アニメーションしていないのではなく、自分が該当するグラフを表示させるまえにアニメーションが終わっていてしまったのです。
これは困りましたね。
CSS3アニメーションの時間はanimation-delayでスタート時間を遅らせることができますが、
指定した秒数後にユーザーがそのグラフを見てくれるとは限りません。
そこで「ウィンドウのスクロールをして表示範囲にはいったら○○を実行」できるjavaScriptがありますので
このjavaScriptを利用することにしました。
スクロールをトリガーとして他のプログラムを実行させることができるjavaScriptライブラリは多くあります。
便利なのがReveal Animations When Scrolling — WOW.jsで
ググるとCSSアニメーション＋wow.jsのエントリーがよく見つかります。
しかし、このwow.jsは個人利用の場合「無料」ですが商用の場合「有料」ライセンスになるので除外しました。
今回選んだのがScrollTriggerです。MIT LicenseでCommercial useもチェック入り。
ScrollTrigger/LICENSE at master · terwanerik/ScrollTrigger · GitHub
ScrollTriggerの使い方
[1]javaScriptを読み込ませて初期化コードを書きます。
[2]アニメーションさせたい要素に[data-scroll]属性を書きます。
hoge
[3]data-scrollの中にはScrollTriggerのオプションが書き込めます。
data-scroll="toggle(.bar1, .invisible)"
toggleの中にクラスを指定することで
スクロールして表示範囲内に入ったらクラス「.bar1」が追加、表示範囲外だとクラス「invisible」へ切り替え
という指定ができます。
ブラウザのWEBディベロッパーツールでクラスがつけ変わるのを見ながらチェックすると動きがわかります。
コードサンプル
60%
75%
35%
See the Pen
CSS棒グラフサンプル by Sakurai (@cherinuno)
on CodePen.
コメント