Blotter.js

Web上で型にはまらないテキスト効果を描画するためのJavaScript API概要

無料アプリ
Self-Hosted

Web上で型破りなテキスト効果を描画するためのJavaScript API。概要Web上のテキストにエフェクトを適用する場合、デザイナーは伝統的にCSSによって提供されるものに制約されてきました。ほとんどの場合、これは完全に適切です。テキストはテキストですよね？それでも、CSSプロパティまたはgifと画像を組み合わせて、より遊び心のあるものを呼び起こす効果を作成するデザイナーの例は数多く存在します。正確には、代替手段を提供するためにBlotterが存在します。Blotterには構成可能なエフェクトのライブラリが増えていますが、学生や経験豊富なGLSLプログラマーが新しいエフェクトをすばやくブートストラップする方法も提供しています。単一のWebGL Back Buffer BlotterでのAtlasingエフェクトは、単一のWebGLコンテキストですべてのテキストをレンダリングし、アトラスを使用して行う描画呼び出しの数を制限します。複数のテキストが同じ効果を共有する場合、それらは単一のテクスチャにマッピングされ、一緒にレンダリングされます。結果の画像データは、各要素の個々の2Dコンテキストに出力されます。アニメーションループ時間ベースの間隔で実行するのではなく、Blotterの内部アニメーションループはrequestAnimationFrameを使用して、ブラウザーの表示更新レートと一致し、ユーザーが他のブラウザータブに移動したときに一時停止します。ユーザーのデバイスのパフォーマンスを向上させ、バッテリー寿命を維持します。BlotterではないものBlotterに渡すテキストは、使い慣れたスタイルプロパティを使用して個別に構成できます。@ font-face仕様でカスタムフォントフェイスを使用できます。ただし、Blotterは最終的に渡されたテキストをキャンバス要素にレンダリングします。つまり、レンダリングされたテキストは選択できません。Blotterは、タイトル、見出し、グラフィック目的で使用されるテキストなどの要素に最適です。Blotterを長いテキスト本文に使用することはお勧めできません。ほとんどの場合、単語に個別に適用する必要があります。

blotter-js