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. no-image
  2. jQuery Section Navi Plugin
  3. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  4. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  5. Responsive Parallax Drag-slider With Transparent Letters
  6. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP