webclips

魅力的なテキストエフェクトを実装できる「Blotter.js」

WebDesign
JavaScript エフェクト

2018/04/17

5種類のテキストエフェクトを実装できる「Blotter.js」が心地よい動きをしてたので忘備録。 Three.jsとUnderscore.jsを使用しChannelSplitMaterial / FliesMaterial / LiquidDistortMaterial / RollingDistortMaterial / SlidingDoorMaterialと5種のエフェクトを実装することができます。

Blotter.js

Materialsの各エフェクトページから右上のコントローラーでエフェクトを確認しながら調整できるのもうれしい。サイトにインパクトを出したい時など使用してみたいもんです。

Blotter.js

PickUp

CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」
様々なデバイスでの表示をチェックできるツール「.resizr」
【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
画像を使わずにCSSだけで三角・矢印を作る方法
リデザインのレビューを集めたWebサービス「reDSGN」