Ink Transition Effect

JavaScript

インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

Ink Transition Effectはインクがこぼれて広がったようなエフェクトを実装することができます。インパクトがあってとても印象的なエフェクトです。CSSアニメーションやjQueryが使われています。何か人とは違ったエフェクトを取り入れたいといった場合によさそうですね。

Ink Transition Effect

デモ

デモではSTART EFFECTボタンをクリックすると、インクが紙にこぼれて染み広がっていくようなエフェクトとともに、コンテンツが表示されます。

右上のバツ印をクリックすると今度は逆にインクが消えていき、元のページへ戻っていきます。

けっこうリアルな感じでとてもおもしろいエフェクトです。

単純にただコンテンツを表示させるだけではなくて、こういったエフェクトとともに表示させることで印象にも残りやすそうですね。

というわけで、CSSアニメーションやjQueryを活用してインクをこぼしたようなエフェクトを実装する「Ink Transition Effect」のご紹介でした。

Ink Transition Effect

関連記事

  1. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  2. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  3. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  4. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  5. Responsive 3d Fold Scroll
  6. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP