webclips

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

WebDesign
JavaScript エフェクト

2018/04/17

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

Blotter.js

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

Blotter.js

PickUp

CSSで実装するボタンデザインとホバーエフェクトのアイデア
複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
色んなエフェクトのCSSボタンを集めたサイト「CSS Buttons」
Web上で差分が確認できるテキスト比較ツール「difff」
レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」
【JS】要素の切り替え時にアニメーションエフェクトを掛けられる「animateTransition.js」