Animated Image Pieces

JavaScript

画像が細かいピースになるアニメーション実装「Animated Image Pieces」

Animated Image Piecesは、画像が細かいピースに分解されるアニメーションを実装できるのが特徴です。1つ1つ小さなピースがバラバラになり、再構築されて次の画像を表示したりといったことが可能です。

Animated Image Pieces

デモ

デモは全部で4タイプ用意されています。画面の右下から各デモを切り替えることが可能です。

デモ1ではいくつか人の名前が表示されていて、いずれかの名前を選択すると現在表示されている画像が細かいピースに分解されて、再構築して目的の画像を表示させるといった一連のアニメーションを確認できます。

単純に画像を切り替えるだけでなく、このようなエフェクトがつくことでとても印象に残りやすいですね。スタイリッシュでとてもかっこいいアニメーションです。

また、デモ2ではエフェクトが3種類も用意されています。バラバラになったピースが上に飛んでいったり横に飛んでいったりと、エフェクトを変えることでいろんなパターンをチェックできます。

デモ3では、中央に表示されているバレリーナの画像をクリックすると、細かいピースが四方に散らばり、その中心にメニューが表示されます。Backをクリックすると、散らばった画像のピースが元の状態に戻る仕組みです。これもかなりオシャレですね。

いろんな種類のデモを見ることができるので、アニメーションの参考にぜひチェックされてみてはいかがでしょうか?

Animated Image Pieces

Owl Carousel 2美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」前のページ

HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」次のページh5Validate

関連記事

  1. jQuery Panelize Plugin
  2. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  3. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  4. jquery-scrollstop

    JavaScript

    スクロールの開始・終了時のイベントを設定できる「jquery-scrollstop」

    jquery-scrollstopはスクロールの開始・終了時のイベント…

  5. Recursive Hover Nav
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP