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

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

Blotter.js





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



  • クオリティの高いグラフを描画するjsライブラリ「Chart.js」
  • vue.jsを使用したプロジェクトをまとめたサイト「made with vue.js」
  • シンプルなチャートを実装できるライブラリ「Frappé Charts」
  • 様々なチャートを生成できるライブラリ「TOAST UI Chart」
  • 非レスポンシブの要素をレスポンシブ化する「Reframe.js」
RELATED POSTS
  • リデザインのレビューを集めたWebサービス「reDSGN」
  • パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」
  • 【jQuery】ページめくり効果を付けられる「OneBook3d」
  • 非レスポンシブの要素をレスポンシブ化する「Reframe.js」
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
  • SVGボタンに様々なエフェクトを実装できる「Distorted Button Effects」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア