画像とjQueryだけでグラフにアニメーションをつけてみた｜TechRacho by BPS株式会社こんにちは、デザイナーのスギヤマです。 この間の雪を降らせるJSが一部で好評だったので、引き続きJSな記事を書いてみます。 サイトを作ってるとグラフなど、インフォグラフィックスを動的に表示して、インタラクティブなコンテンツにしたいといった要望は多々あると思います。 canvas要素を使って表現したりしますが、canvasが使えない（わからない）場合もあると思います。 なので、今回はcanvasを使わずに、画像とjQueryを使って、それっぽい動きのあるグラフを作ってみます。 サンプルコード いかがでしょう？それっぽく動くグラフになっているかと思います。 今回は、CSSのoverflow:hiddenとjQueryのanimate()関数を利用しています。 以下で簡単に説明していきます。 動きをつける単位で、グラフを画像パーツに分割する グラフのデザインデータは、psdなどでもらえる場合が多
