Windy – A Plugin for Swift Content Navigation

このjQueryプラグイン「Windy」を使用すると、まるで写真やカードが風でひらひらと飛ばされてしまっているように画像をめくっていくことができます。

サンプルを見て頂くと分かると思います。

→ 写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」サンプル

このjQueryプラグイン「Windy」を使用して、あまりスペースがないところでも印象的にカッコ良く複数の画像を見せることができそうですね。画像だけでなくテキストや見出しも表示することができます。

jQueryプラグイン「Windy」の使用方法は続きをご覧下さい。


【使用方法】
まずは、WINDY: A PLUGIN FOR SWIFT CONTENT NAVIGATIONからソースを一式ダウンロードします。

<head>部にcssファイルの場所に注意しながらcssを記入します。画像の大きさなど必要に応じてスタイルシートの中を適宜設定して下さい。

<link rel=”stylesheet” type=”text/css” href=”css/windy.css” />
<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<noscript><link rel=”stylesheet” type=”text/css” href=”css/noJS.css” /></noscript>

</body>の直前にスクリプトを設定します。以下はデフォルト設定です。ナビボタンを押すと下から上方向へ飛んでいきます。

飛ばしたい角度や距離を変更するには以下のようにオプションで、boundariesの値を追加します。設定した値の範囲内でランダムに飛ばされます。

コンテンツは<body>部にリスト要素で以下のように画像やテキスト見出しなどを設置します。最後にナビボタンを設置して完了です。

WINDY: A PLUGIN FOR SWIFT CONTENT NAVIGATIONの本家のデモでは、他のデモも見れますので是非みて下さい。

以下にサンプルのソースを記述しておきます。どうぞご参考まで。

この記事と関連してると思われる記事: