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

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

Blotter.js





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


  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • シンプルなチャートを実装できるライブラリ「Frappé Charts」
  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
RELATED POSTS
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • 直感的に操作できるサイトツアーを実装できるライブラリまとめ
  • 【jQuery】レスポンシブ対応のスライダー「Glide.js」
  • Web上で差分が確認できるテキスト比較ツール「difff」
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • アニメーションアイコンのライブラリ「60 Free Animated Icons」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • Photoshopで簡単に背景を伸ばすテクニック
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」