[B! JavaScript][アニメーション] hachi09のブックマーク

最近のJS&CSSアニメーションライブラリまとめ - Qiita

最近のHTML5アニメーションについてのまとめです。まとめを紹介する前にCSS3アニメーション vs JSアニメーションのパフォーマンスについての有名な海外の記事を紹介します。 http://davidwalsh.name/css-js-animation 大雑把に内容を要約すると、以下のようなお話です。 - DOMを操作したJavaScript AnimationよりCSSの方が早い - ただしCSSにも色々欠点がある(GPU負荷が大きい、ブラウザの対応とか) 結論: JavaScriptでアニメーションを最適化できるライブラリを使いましょう！この記事で紹介されている最適化を施したJSライブラリはGSAPとVelocity.jsです。大規模なアニメーションでない場合はVelocity.jsがおすすめのようです。もちろん上記の他にも色々ライブラリは存在し、使用用途により最適なライブラ

hachi09 2016/03/23

リンク

[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe

表示ページの天地左右からアニメーションでスライド表示するパネルを実装するjQueryのプラグインを紹介します。デモページデモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。 notifyMeの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="assets/css/notifyme.css" type="text/css" /> </head> <body> ... <script type="text/javascript" src="assets/js/jquery.js"></script> <script type="text/javascript" src="assets/js/notifyme.js"></scr

hachi09 2014/10/31

リンク

[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal

デモページフッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述

hachi09 2014/05/26

リンク

[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS

スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。 jQueryなどの他のスクリプトは不要です。 AniJS -CodePen こちらのデモでは、ロード時にぶらぶら揺れて表示し、ヘッダのクリック、フッタのクリックにもアニメーションが仕込まれています。 AniJSの使い方 Step 1: 外部ファイル当スクリプトを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss

hachi09 2014/05/12

リンク

要素や背景をスクロールに合わせてアニメーションさせるスクリプト -Swift Parallax | コリス

デモページ：タイムライン Swift Parallaxの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、当スタイルシートをhead内に外部ファイルとして記述します。 <head> ...  <script src="https://code.jquery.com/jquery-latest.min.js"></script>  <link rel="stylesheet" href="css/swift.css"> <script src="js/swift.js"></script> </head> Step 2: JavaScript 外部ファイルを記述した下あたりに、スクリプトをセットします。 <script

hachi09 2014/04/09

リンク

HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA

HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。スプライトシートを使う方法ベクターアニメーションを使う方法スプライトシートビルダーを使う方法おまけ：GIFアニメーションを使う方法おまけ：Flashアニメーションを使う方法スプライトシートを使うスプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。表現の再現性が高いう