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

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

Blotter.js





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



  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
  • きれいなエフェクトの検索フォームUI「Inspiration for Search UI Effects」
  • CSSだけでブルブル震えるエフェクトを実装できる「CSShake」
  • 【jQuery】ジオメトリックを実装できる「particleground.js」
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
RELATED POSTS
  • 【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
  • きれいなエフェクトの検索フォームUI「Inspiration for Search UI Effects」
  • アプリ・Web制作で必要な要素をチェックできる「Checklist Design」
  • パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
  • クオリティの高いグラフを描画するjsライブラリ「Chart.js」
  • SVGで作成されたローディングアイコンセット「SVG Loaders」
RECENT POSTS
  • ロゴ作成が簡単にできるロゴジェネレーター12選【無料・低価格】
  • 長いURLを短くするおすすめの短縮URLサービス8選
  • 【2020年版】Photoshopのブラシを追加する方法
  • Photoshopの代用になる無料で使える画像編集・加工ツール
PICKUP
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • CSSで作成する吹き出しとデザインのアイデア
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)
  • WordPressのおすすめテーマ19選【無料版・有料版】