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. Bootstrap Carousel Touch Slider with Text Animation
  2. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  4. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  5. CSS3 Menu Slider

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP