アプリ開発からお金の節約まで幅広く気になったネタを記録していきます

さくらいらぼ

JavaScript Web制作

スクロールしたらCSS3のグラフがアニメーションするようにする方法

スポンサードリンク

投稿日:

スクロールしたらCSS3のグラフがアニメーションするようにする方法

スクロールしたらCSS3のグラフがアニメーションするようにする方法

『アニメーションするグラフを作ってくれ』と言われてしました。
知らない間にアニメーションの需要が出てきているんですね。
少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。

たしかにアニメーションするグラフは見栄えが良いし、
企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。

ちょっとリッチなページ、ひと目を引くページ作成で
アニメーションをいれてくれと言われることが増えるのでしょうね。
FLASHを通っていないのでアニメーションの基礎勉強もやらなくてはならずその場その場で対応していくしかないのでしょう。
やることが多すぎて困ります。

さて、今回のお題である「アニメーションするグラフ」

WEBページでアニメーションするグラフを作るにあたり2019年現在では
グラフをつくるためのjavaScriptライブラリが充実しています。
Chart.jsなどが有名で使いやすいです。

【Chart.js】グラフを簡単に作れるJavaScriptライブラリ

Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 ・どのグラフにするか? ・どんな数値・メモリを入れていくか? と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意されており色を変えるだけでなく、カスタマイズも出来ます。 グラフが表示されるとき ...

テンプレは用意されているので,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]属性を書きます。

[3]data-scrollの中にはScrollTriggerのオプションが書き込めます。

toggleの中にクラスを指定することで
スクロールして表示範囲内に入ったらクラス「.bar1」が追加、表示範囲外だとクラス「invisible」へ切り替え
という指定ができます。
ブラウザのWEBディベロッパーツールでクラスがつけ変わるのを見ながらチェックすると動きがわかります。

コードサンプル

See the Pen
CSS棒グラフサンプル
by Sakurai (@cherinuno)
on CodePen.

スポンサードリンク

-JavaScript, Web制作
-, , ,

Copyright© さくらいらぼ , 2019 All Rights Reserved.