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 Smart Placeholder
  2. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  3. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

  4. jquery-time-slider

    JavaScript

    時間と日付を選択できる「jquery-time-slider」

    jquery-time-sliderは時間と日付を選択できるjQuer…

  5. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

  6. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP