いまは jQuery を使わず Vanilla で書くのがモダンな実装なのでしょうか。しかし流行にあまり左右されたくない自分はまだまだ jQuery を使い倒しています。何かトラブルに見舞われた際に先人のリソースが蓄積されているメリットもありますし。 そしてそんな jQuery のアニメーションエンジンとして最も使われているだろうプラグインが Velocity.js かと思います。CSSアニメーションにも対応していてそのままでもかなり速く動作します。 ただ CSS アニメーションについてはさらに最適化する方法があります。 CSS will-change とはあまりメジャーにはなっていないようですが、CSS にはアニメーションを最適化する will-change と呼ばれるプロパティが存在します。 文字通りなので察しがつくところでもあるかと思いますが、ブラウザに対しあらかじめどの値が変化する
Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、
先日開催されたDemo Day Tokyoでもプレゼンをされていた林さんによるWebGLベースのフレームワーク「ALGO.JS」。 Flash時代（もう名前ないけど)のようにスケッチをいろいろ作って、スタディしていく感じは素敵でしたよね、そんなノリで何かの機能を実装するよりWebGLベースのクリエイティブ・コーディングをサポートするフレームワークがこの「ALGO.JS」。 こちらでいろんなサンプルがご覧になります。開発状況はGITHUBにも。 またカヤックさんによるオンラインでFlashのコードかけるwonderflのように、ALGO.JSのコードをオンラインで公開、実行できるプラットフォームも来年4月目処で作られているとのこと。こちらも大変そうだけど楽しみ！ぜひ興味あるひとはトライしてみては！
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
<!-- init --> var init = { canvas : new Object(), ctx : new Object(), size : {x:window.innerWidth, y:window.innerHeight}, nodeStrokeFlag : false, canvasSetup : function() { console.log("passing") init.canvas = document.getElementById("canvas"); init.canvas.width = init.size.x; init.canvas.height = init.size.y; init.ctx = init.canvas.getContext("2d"); } }; init.canvasSetup(); <!-- init --> <!-- uti
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く