Animated Image Pieces

JavaScript

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

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

Animated Image Pieces

デモ

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

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

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

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

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

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

Animated Image Pieces

関連記事

  1. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  2. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  3. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  4. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  5. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP