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. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  2. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  3. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  4. NO IMAGE

    JavaScript

    レスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」

    offbeatSliderはレスポンシブに対応したアニメーション付きの…

  5. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  6. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP