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

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

Blotter.js





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



  • あると便利なスクロールアニメーションライブラリ11選
  • 様々なチャートを生成できるライブラリ「TOAST UI Chart」
  • リアルな水滴を表現できる「Rain & Water Effect Experiments」
  • 動きのあるバブルを背景に設定することができる「bubbly-bg」
  • vue.jsを使用したプロジェクトをまとめたサイト「made with vue.js」
RELATED POSTS
  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
  • アニメーションアイコンのライブラリ「60 Free Animated Icons」
  • CSSで出力できるドット絵ジェネレーター「Pixel Art to CSS」
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • シンプルなチャートを実装できるライブラリ「Frappé Charts」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
RECENT POSTS
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】 無料で使えるフリー動画素材サイト10選
POPULAR POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • 【2021年版】 無料で使えるフリー動画素材サイト10選
  • PhotoShopで新聞の写真風ドットスタイルに画像を加工する
  • コピペするだけで使えるCSSボタンジェネレーターまとめ
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法