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

EXIFPurgeMacでExif情報をサクッと削減できるアプリ「EXIFPurge」前のページ

ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」次のページFilterizr

関連記事

  1. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  2. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  3. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  4. Responsive jQuery Pop Up Gallery
  5. qpScroll
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

最近の記事

  1. ハンガリー産 純粋アカシアはちみつ
  2. COMOLI ダブルレイヤー L/Sクルー
  3. メキシコ オアハカ
  4. ドリップ
  5. チェリー

アーカイブ

PAGE TOP