うえぶまなぶうえぶまなぶJavaScriptでCSSアニメーションを自在に制御可能なライブラリ「Dynamics.js」を試してみた!公開日:2015/06/16JavaScript学習programmingtwitterFacebookgoogle+はてなtfgは「CSSでアニメーションは難しい!」とか、「JavaScriptで全部制御したい!」...という人にはオススメのライブラリ「Dynamics.js」のご紹介!コードが非常にシンプルで扱いやすいのが特徴で、単純なWebサイトへ簡単に動きを付けられるようになります。使い方!まずは、Downloadページから最新版の「Dynamics.js」をダウンロードしましょう。2015年6月現在の最新版は「0.0.3」となっています。option);-【el】DOMエレメントのことで、CSSでスタイリングするように要素を指定します。どんなアニメーションをさせたいかを指定します。細かい微調整をします。これだけ覚えておけば手軽にアニメーションが実現できるのは魅力的です。実際に作ってみよう!例えば、以下のように「div」要素で作った黒色の四角があったとします。black;}この状態で、先ほどの構文に当てはめながらjavaScriptを書くと、以下のようになるでしょう。option);「div」要素のboxを「el」として設定しました。あとは、「property」と「option」を指定すれば、「div」要素のboxはアニメーションしてくれるわけです。今回は、左右にバウンドするようなアニメーションを指定したいと思います。そこで、「property」に横移動を設定し、「option」にバウンドするアニメーションを指定したのが以下のスクリプトになります。option);どんなオプションのパラメータが指定できるのかは、「Dynamics.js」の公式サイトで実際に試せるようになっているので便利です。CodePen.まとめ「Dynamics.js」は、単純にパラメータを指定するだけなので、プログラミングというよりも「ジェネレーターアプリ」に近いかもしれません。使い方はすぐに覚えられるので、既存のサイトやブログに面白いアニメーションをぜひ実装してみてください。ちなみに、公式サイトにも掲載されていますが、SVGをアニメーションさせることも可能です。CodePen.ちょっとしたアクセントには最適ではないでしょうか。注意点としては、あまり古いブラウザには対応していないところ...。