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

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

Blotter.js





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



  • クオリティの高いグラフを描画するjsライブラリ「Chart.js」
  • 【jQuery】テキストカラーをシャッフルさせるjQueryプラグイン「JUMBLE」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
  • 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
  • 【jQuery】ジオメトリックを実装できる「particleground.js」
RELATED POSTS
  • 【2021年版】Google Fontsの使い方とおすすめ日本語フォント
  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
  • 180種類のグラデーションがまとめられた「WebGradients」
  • 【jQuery】動画を背景にフルスクリーンで表示させる「covervid.js」
  • 【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
  • 【jQuery】ページにマーカーを実装することができる「markerPen」
RECENT POSTS
  • 【2021年版】Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】無料で使えるフリー動画素材サイト10選
  • 【2021年版】無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 無料で使えるフリーアイコン素材サイト15選
PICKUP
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • 導入しておきたいWordPressのおすすめプラグイン
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア