-
ID:JSe9/R さんの質問

http://www.sbenergy.jp/study/data/
上記サイトのようなアニメーションをつけたいと思っているのですが、これはどのような方法で作っているのでしょうか?
イラスト画像がくるっと回転したり、グラフが上にのびて数字が表示されるなどのアクションをつける方法を知りたいです。CSSアニメーションのようなのですが、ソースをみてもどうやって作っていくのかが分かりませんでした。
このjs、cssを使う、またはこのソフトで作成できるなど、ご教授のほど
よろしくお願いします。

みんなの回答 4 件

ID:HrqHxm さんの回答

CSS3 アニメーションなのでリンク先あたりを参考にすれば作れるかと。

CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow

http://ri-mode.com/rainbow/2013/06/10/css3_keyframes_transform/
ID:JSe9/R

早速ありがとうございます。上記サイトを参照してみます。

ID:0q0Qzh さんの回答

ん?本当にソースみたんですか?
ソースみて理解でいないということは、ここで聞いても理解できないと思う。

ID:0q0Qzh

CSS ファイル

ttp://www.sbenergy.jp/assets/css/style.css

ID:0q0Qzh

JS ファイル
ttp://www.sbenergy.jp/assets/js/util.js

ID:0q0Qzh

これで理解できないなら諦めましょう。

ID:OxCAdA

本当コレ。

ID:JSe9/R

ご指摘ありがとうございます。もう一度しっかりソースを見て確認見たいと思います。

ID:g8dIbE

これで理解出来ないなら諦めるんじゃ無くて、是非調べてみてください〜b

ID:JSe9/R

そうですね。SVGなどもあるようなので、いろいろ調べてみます!

ID:zzWtbP さんの回答

色々ライブラリあるよ。これとか

Chart.js | Open source HTML5 Charts for your website

http://www.chartjs.org/
ID:JSe9/R

ありがとうございます。こちらも参考にさせていただきます!

ID:Es1Wkm さんの回答

回答じゃなくてごめん。サイト見たけど「Google Chromeの一部バージョンでは正常動作しない場合があります。」は珍しいなw IEならわかるけど。

ID:JSe9/R

回答じゃなくてもレスうれしいです。
あ、ほんと注意書きがありましたね。ほんと珍しい、初めてみたかも。

最終更新日:2015-04-10 (2,048 views)

関連するトピックス

ページ上部に戻る