Blotter.jsを使ってテキストに「ねじれ効果」を与える方法

• デモページ
• ソースダウンロード

近年、テキストにねじれ効果を与えるWebデザインの人気が出てきており、多くの個性的なWebサイトがこの流行を取り入れています。

今回は2つのデモを例に、Blotter.jsライブラリを使ってテキストにねじれ効果を与える方法をご紹介します。

Blotterとはthree.jsとUnderscore.jsを使用したAPIで、アーティスティックなテキスト効果を生み出せるのが特徴です。本記事でご紹介するデモでは、ページをスクロールしたりマウスを動かしたりすることでテキストにねじれ効果が与えられます。

なお今回のデモは、Bounceのプロジェクトから着想を得ました。ページをスクロールすると装飾された文字が変形し、ユニークな視覚効果を演出します。

注意：今回紹介するコードはあくまで実験的なものです。最新のCSSプロパティを使用しているため、古いブラウザは対応していない可能性があります。

Blotter.jsを使ってテキストにねじれ効果を与える

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サイトデザイン作りに活用してみてください。

また本記事を面白いと思ってくれた方は、こちらの関連記事もどうぞ。

• 液体のようなゆがみ効果をの作成方法（著者：ヤニス）
• WebGLを使ってホバーで画像をゆがませる方法（著者：ロビン）
• WebGLを使った蜃気楼のようなアニメーションゆがみ効果（著者：ルーカス）

（原文：Mary Lou　翻訳：Yui Tamura）

あわせて読みたい！▼