「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
近年、テキストにねじれ効果を与えるWebデザインの人気が出てきており、多くの個性的なWebサイトがこの流行を取り入れています。
今回は2つのデモを例に、Blotter.jsライブラリを使ってテキストにねじれ効果を与える方法をご紹介します。
Blotterとはthree.jsとUnderscore.jsを使用したAPIで、アーティスティックなテキスト効果を生み出せるのが特徴です。本記事でご紹介するデモでは、ページをスクロールしたりマウスを動かしたりすることでテキストにねじれ効果が与えられます。
なお今回のデモは、Bounceのプロジェクトから着想を得ました。ページをスクロールすると装飾された文字が変形し、ユニークな視覚効果を演出します。
注意:今回紹介するコードはあくまで実験的なものです。最新のCSSプロパティを使用しているため、古いブラウザは対応していない可能性があります。
Blotterのインターフェイスは使いやすく、GLSLシェーダを使ったテキスト効果が作成可能。用意された多数の効果(マテリアル)を選択できるほか、GLSLの知識があるばあいは完全オリジナルの効果も実装できます。
まずは基本事項を読み使用方法を確認し、マテリアルを扱って実際に動きを見てみましょう。
本記事でご紹介するデモでは、ページをスクロールするとマテリアルのuniform
値が変化する仕組みになっています。スクロールの速度が速くなると、そのぶん値の変化も大きくなります。
簡単な例を以下に示しました。
☑︎HTML
<span data-blotter>text here</span>
☑︎JavaScript
const MathUtils = {
// ラインの方程式
lineEq: (y2, y1, x2, x1, currentVal) => {
var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
return m * currentVal + b;
},
// 線形補間の関数
lerp: (a, b, n) => (1 - n) * a + n * b
};
// Blotterのマテリアルを作成
const material = new Blotter.LiquidDistortMaterial();
// デフォルトのマテリアルuniform値を設定
material.uniforms.uSpeed.value = .5;
material.uniforms.uVolatility.value = 0;
material.uniforms.uSeed.value = 0.4;
// Blotterのインスタンスを作成
const blotter = new Blotter(material);
// data-blotterを持つすべてのHTML要素においてBlotterテキストを初期化
const blotterElems = [...document.querySelectorAll('[data-blotter]')];
blotterElems.forEach((el) => {
const text = new Blotter.Text(el.innerHTML);
blotter.addText(text);
// ここでHTMLコンテンツを削除
el.innerHTML = '';
// 作成されたキャンバス
const scope = blotter.forText(text);
// メイン要素に添える
scope.appendTo(el);
});
// ここで、スクロールすると1つ(またはそれ以上)のuniform値が変化するようにする
// スクロールが速いほど値の変化も大きくなる
let currentScroll = window.pageYOffset;
// volatilityは変化するuniformを示す
let volatility = 0;
// 0(スクロールなし)から0.9(maxscrollの速度でのスクロール)まで設定可能
const maxscroll = 10;
const uniformValuesRange = [0,0.9];
// requestAnimationFrameと線形補間を使用し効果を演出
const render = () => {
// 現在のスクロール位置
const newScroll = window.pageYOffset;
// 最後のリペイントからどれだけスクロールしたか
const scrolled = Math.abs(newScroll - currentScroll);
// volatilityの新たな値を取得
volatility = MathUtils.lerp(volatility, Math.min(MathUtils.lineEq(uniformValuesRange[1], uniformValuesRange[0], maxscroll, 0, scrolled), 0.9), 0.05);
// volatilityを設定
material.uniforms.uVolatility.value = volatility;
// 現在のスクロール位置を更新
currentScroll = newScroll;
// 繰り返し
requestAnimationFrame(render);
}
requestAnimationFrame(render);
1つ目のデモでは、スクロールの速度がねじれの量を決定しています。
2つ目のデモでは、マウスの動きの速度が効果の強度をコントロールしています。
簡単に、テキストに対して個性的なねじれ効果を導入できるBlotter.js。
今回紹介したデモを参考に、ユニークなWebサイトデザイン作りに活用してみてください。
また本記事を面白いと思ってくれた方は、こちらの関連記事もどうぞ。
(原文:Mary Lou 翻訳:Yui Tamura)
あわせて読みたい!▼
THREE.MeshLineで、ヌルヌル動く線を作ろう!
Workship MAGAZINE
Three.jsでパーティクルアニメーションを作ってみよう
Workship MAGAZINE
Three.jsで波形アニメーションを作ってみよう!! ビルがニョキニョキ生えてくる?!
Workship MAGAZINE
チュートリアルをなぞるだけ!Three.jsでインタラクティブエフェクトを作ろう
Workship MAGAZINE