[JS]表示サイズに合わせて、さまざまな要素のサイズやレイアウトをアニメーションで変更するスクリプト -JResponsive

表示サイズに合わせて、ページ内のさまざまな要素のサイズやレイアウト、最小・最大の設定も可、をアニメーションで変更するjQueryのプラグインを紹介します。

サイトのキャプチャ

JResponsive

関係ないけど、is-great.netってドメイン、すごいですね。

JResponsiveのデモ

デモはIE8+をはじめ、モダンブラウザでご覧ください。
表示サイズを変更すると、パネルのサイズやレイアウトがアニメーションで変更します。

まずは1200pxで表示。

サイトのキャプチャ

デモページ:幅1200pxで表示

各パネルは3列で、大きいサイズで配置されています。

サイトのキャプチャ

デモページ:幅860pxで表示

表示サイズを少し小さくすると、3列のままでサイズが小さく配置されます。

サイトのキャプチャ

デモページ:幅768pxで表示

768pxで表示すると、サイズは大きいですが2列に。

サイトのキャプチャ

デモページ:幅640pxで表示

640pxで表示すると、2列のままでサイズも小さくなります。

JResponsiveの使い方

Step 1: 外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。
※レイアウト系なので、head内に配置。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jresponsive.js"></script> 

Step 2: HTML

HTMLはdivなどでパネルを実装します。

<body>
<div id="example"></div>
</body>

Step 3: JavaScript

jQueryのセレクタで要素を指定し、レスポンス時のアニメーションや最小・最大幅、高さなどを設定します。

$("div").jresponsive({
  transormation: 'animation', 
  min_size: 100,
  max_size: 250,
  height:250,
  class_name: 'item',
  content_array: content
});

スクリプトのオプション

transormation
エフェクトは通常のアニメーションとフェードの2種類
min_size
要素の最小幅
max_size
要素の最大幅
height
要素の高さ、「0」でエレメントと同じ高さ
class_name
divコンテナ内の要素のclass名
content_array
divコンテナ内に配置する配列要素のアイテム

top of page

©2017 coliss