こんにちは、ハル@haru_elpisです。
テキストをユラユラさせたり、3Dのようにできる[Blotter.js]の紹介です。
Blotter.jsの使い方
公式ホームページ
Blotter.js
A JavaScript API for drawing unconventional text effects on the web.
ダウンロード
GitHub - bradley/Blotter: A JavaScript API for drawing unconventional text effects on the web.
A JavaScript API for drawing unconventional text effects on the web. - bradley/Blotter
ダウンロードしたファイルのbuildフォルダ内の「blotter.min.js」・「fliesMaterial.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。
HTML head
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/blotter.min.js"></script>
<script src="./js/fliesMaterial.js"></script>
HTML body
<div id="target"></div>
JavaScript
// テキストの設定です。詳細なプロパティは公式のドキュメントにあります。
let text = new Blotter.Text("Hello", {
family : "serif",
size : 200,
fill : "#171717"
});
// 仕様するエフェクトを定義。
let material = new Blotter.FliesMaterial();
material.uniforms.uSpeed.value = 1.0; // プロパティはこんな感じで設定
material.uniforms.uPointCellWidth.value = 0.008; //ユニットの大きさ
material.uniforms.uPointRadius.value = 0.9; //玉の大きさ
// 設定したテキストとエフェクトをセット。
let blotter = new Blotter(material, { texts : text });
// ほぼおまじない。
let scope = blotter.forText(text);
// 任意のDOMを用意
let target = document.getElementById('target');
scope.appendTo(target);
コメント