スキップナビゲーションリンク

JSリキッドアニメーション

動作対象環境

仕様

動作サンプル

サンプルのみを別窓で表示

サンプルダウンロード

サンプルダウンロード

解説

ウィンドウ横幅サイズに追随してレイアウトされるリキッド構造を、動的に座標を演算することにより実装しています。
サンプルのみを別窓で表示 によってサンプルを単体で表示した上で、ブラウザのウィンドウサイズを様々に変更して動作を確認してみてください。

グリッドの表示順は配列をランダムに並べ替えることによって、動作の度に異なる順序でレイアウトします。
また、各グリッドの移動加速度を、jQuery Easingの主要プロパティをランダムに入れ替えて設定することにより、グリッド毎に異なる移動表現を実現しています。

本サンプルでは、最少グリッド列数を3列に設定しており、ウィンドウサイズが3列より狭くなる場合は、グリッドを移動させず、ウィンドウに横スクロールが表示されます。

関連情報