Wookmark jQuery pluginでもウインドウリサイズ時のアニメーションを実装する

可変グリッドレイアウトを実現できるjQueryプラグインでWookmark jQuery pluginというものがあります。

このプラグインは同一幅の要素を敷き詰めるものですが、ウインドウリサイズ時には単に整列され直すだけでjQuery Masonryのようにアニメーションさせることができません。

※ ウインドウリサイズ時のアニメーションが必要かどうかという議論は置いといて。。。

jQuery Masonryのようにアニメーションさせられないかと思い考えてみました。

DEMO
※ウインドウのサイズを変えてみてください。

AD

Javascript

CSS不要で動作するので、jquery.wookmark.jsへの変更のみでアニメーション処理を追加することができます。

377行目あたりにある以下の部分が子オブジェクト(DEMOではdiv.block)に対するCSSを付加している部分です。
これをCSSではなくanimateにすれば、ウインドウリサイズ時の並び替えをアニメーションにすることができます。

上記部分を以下のように変更します。
ifによる条件分岐を入れているのは、初回レイアウト時はアニメーションさせないためです。

ウインドウをリサイズしてからアニメーションが実行されるまでの間隔(タメのようなもの)は、wookmarkメソッドのオプションである「resizeDelay」の数値を変更することで調整できます。

余談ですが、お馴染みのjQuery MasonryはjQuery非依存のMasonryへとバージョンアップしましたが、残念ながらIE7以下がサポート対象外とされてしまいました。

What is Masonry’s browser support?
Masonry works in IE8+ and modern browsers, including mobile browsers on iOS and Android.

もちろんIE7以下など知らんがなと言いたいところですが、お仕事的にはIE6対応を求められるケースもあるでしょう。。。。IE7なんぞ(´・ω・`)知らんがな、と言いたい。。。。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。