ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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!

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2