【Javascript】Wookmark jQuery pluginでもウインドウリサイズ時のアニメーションを実装する | Wood-Roots:blog

2013
08/27

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

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

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

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

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

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

ADs

Javascript

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

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

1
2
3
4
        // Position the item.
        itemCSS[this.direction] = sideOffset;
        itemCSS.top = shortest;
        $item.css(itemCSS).data('wookmark-top', shortest);

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 追加 */
if($item.data('wookmark-top')){
//初回（ページロード時）以外の処理
//初回レイアウト時には「wookmark-top」というdata属性は付加されていないので、それで判定
 
var animTop = shortest;
var animLeft = sideOffset;
$item.css(itemCSS).data('wookmark-top', shortest);
 
$item.stop(true,true).animate({
top: animTop + 'px',
left: animLeft + 'px'
},'normal','easeInOutExpo');  //スピードやイージングはお好みで。。。
} else {
/* 追加ここまで */
//初回（ページロード時）の処理。アニメーションさせない。
 
        // Position the item.
        itemCSS[this.direction] = sideOffset;
        itemCSS.top = shortest;
        $item.css(itemCSS).data('wookmark-top', shortest);
 
/* 追加 */
//top,leftの値は初回以外使わないので消去。
delete itemCSS[this.direction];
delete itemCSS.top;
}
/* 追加ここまで */

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

1
resizeDelay: 50 //ウインドウリサイズ後何ミリ秒でレイアウトのリセットを行うか。大きな数値にするとタメが大きくなる

余談ですが、お馴染みの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なんぞ(´・ω・`)知らんがな、と言いたい。。。。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

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

Category

Archive

Search

Social