Scrawl-canvas - Canvasを使ったアニメーションライブラリ
HTMLではDOMを使ってデザインを構築するだけでなく、Canvasで自由度高くコンテンツをレンダリングできます(他にWebGLもありますが)。Canvasは扱いが難しいですが、アニメーションなども実現でき、可用性の高い技術です。 そんなCanvasを使って面白いアニメーションを実演してくれるのがScrawl-canvasです。
Scrawl-canvasの使い方
ドラッグ&ドロップの例。
画像の上に画像を表示しています。下のパラメータを使って動的に配置を変えられます。
動画も使えます。
アニメーションの例。
DOMのような重なりを表現しています。
重なっている状態によって枠の色が変わります。
Scrawl-canvasはレスポンシブに対応しており、サイズを変えるとアニメーションも自動的に変化します。アニメーションはイラストテキスト、動画、図形など様々なオブジェクトで利用できます。
Scrawl-canvasはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
Scrawl-canvas Tour KaliedaRik/Scrawl-canvas: Responsive, integrated and interactive HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!