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!