jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

ウィンドウ幅に合わせて画像をアニメーションで再配置する

2017年7月10日

海外のホームページを見ていたとき、ウィンドウ幅に応じて画像の羅列がカラム数を増減しつつアニメーション移動するというデザインを見かけました。思わず「かっけーー」と思い、思っただけでどう作っているのか等は考えなかったのですが、ここ最近で3件程、このようなデザインのご相談が有りました。

こういうのです。

サンプル

どうせプラグインが有るんだろうとか、ソースコードをパクっちまえ、とかは自分の力にならないので、悩んでみる事にします。

  • アニメーションするのだから、画像は絶対位置で配置し、指定した位置へアニメーションで移動させれば良いのだろう
  • 画像をラップしている枠の幅を1列に配置したい画像枚数で割ればleftからの絶対位置は計算出来る
  • 全体の枚数を1列の枚数で割れば行数が解るので、topからの絶対位置は計算出来る
  • 案件によって表示する幅やカラム数が変わるだろうから、それは自由に指定したい
  • とりあえず画像は真四角にして計算し易いようにしよう
  • レスポンシブデザインに連携するようにしなくてはダメだ
  • なら@mediaの幅をtriggerとしてアニメーションさせるようにするか

こんな感じで考えてみました。

 

ちなみにCSSは以下の程度で。

 

HTMLの方で設定を行います。

trigger*は移動アニメーションを実行するタイミングで、media*はその時の横列数となります。

 

短いソースコードなので解説はしませんが、このくらいシンプルなのを書いておけば応用が効きそうです。あと、画像枚数が多かったり重たいと読込時にみっともないので、imagesLoaded() jquery pluginを使わせて頂いています。

ウィンドウの幅を変えるってケースがいったいどれくらいあるのだろうか?また、そのときアニメーションさせる事で、どのような効果が得られるのか?という点には疑問を持ちますが、格好良いことには間違いありませんので、何かの参考になれば良いかなぁ。

 

 

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP