[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope

ブラウザごとに最適な方法を使って、ダイナミックなアニメーションでレイアウト変更やデータのフィルタリング・ソートを行うjQueryのプラグインを紹介します。

サイトのキャプチャ

Isotope: An exquisite jQuery plugin for magical layouts

まずは、そのダイナミックなアニメーションが体験できるデモからご紹介。

デモのキャプチャ

Demo: Basic
Isotopeの機能が分かる最もベーシックなデモです。
ブラウザのサイズを変更すると、それにあわせてレイアウトがアニメーションで変更されます。

デモのキャプチャ

Demo: Layout modes
各パネルをmasonry(レンガ状)に配置したレイアウト。ブラウザのサイズ変更だけでなく、「Layout modes」からさまざまなレイアウトのパターンに変更できます。

デモのキャプチャ

Demo: Layout modes
「Layout modes」の「masonryHorizontal」を選択すると、同じmasonry(レンガ状)ながら水平方向に配置したレイアウトになります。

デモのキャプチャ

Demo: Filtering
フィルタリングのデモです、それぞれのボタンをクリックすると、各データの表示・非表示・配置をアニメーションで楽しめます。

デモのキャプチャ

Demo: Sorting
ソートのデモです。これも同様に各ボタンをクリックすると、それぞれのソートをアニメーションで楽しめます。

デモのキャプチャ

Demo: images
IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。

Isotopeの特徴

  • レイアウト モード:
    CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。
  • フィルタリング:
    jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。
  • ソート:
    あらゆるデータからソートが行えます。
  • 各機能の互換性:
    レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。
  • 最適化:
    Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ(IEなど)は、JavaScriptでアニメーションを実現します。

Isotopeの実装

実装は、Layout modesを例に説明します。

パネルは普通のdiv要素で実装されており、スクリプトで指定することでさまざまなレイアウトに対応できます。

HTML

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

JavaScript: masonry

$('#container').isotope({
  masonry : {
    columnWidth : 240
  }
});

JavaScript: masonryHorizontal

$('#container').isotope({
  masonryHorizontal : {
    rowHeight : 360
  }
});

上記は紹介したデモのスクリプトになります。他のデモもサイトには解説があります。

Isotopeのドキュメントは、下記ページにまとまっています。

top of page

©2017 coliss