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

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を記入します。画像の大きさなど必要に応じてスタイルシートの中を適宜設定して下さい。

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
       <script type="text/javascript">	
			$(function() {

				var $el = $( '#wi-el' ),
					windy = $el.windy(),
					allownavnext = false,
					allownavprev = false;

				$( '#nav-prev' ).on( 'mousedown', function( event ) {

					allownavprev = true;
					navprev();
				
				} ).on( 'mouseup mouseleave', function( event ) {

					allownavprev = false;
				
				} );

				$( '#nav-next' ).on( 'mousedown', function( event ) {

					allownavnext = true;
					navnext();
				
				} ).on( 'mouseup mouseleave', function( event ) {

					allownavnext = false;
				
				} );

				function navnext() {
					if( allownavnext ) {
						windy.next();
						setTimeout( function() {	
							navnext();
						}, 150 );
					}
				}
				
				function navprev() {
					if( allownavprev ) {
						windy.prev();
						setTimeout( function() {	
							navprev();
						}, 150 );
					}
				}

			});
		</script>

$(function() {

var $el = $( '#wi-el' ),

windy = $el.windy(),

allownavnext = false,

allownavprev = false;

$( '#nav-prev' ).on( 'mousedown', function( event ) {

allownavprev = true;

navprev();

} ).on( 'mouseup mouseleave', function( event ) {

allownavprev = false;

} );

$( '#nav-next' ).on( 'mousedown', function( event ) {

allownavnext = true;

navnext();

} ).on( 'mouseup mouseleave', function( event ) {

allownavnext = false;

} );

function navnext() {

if( allownavnext ) {

windy.next();

setTimeout( function() {

navnext();

}, 150 );

}

function navprev() {

if( allownavprev ) {

windy.prev();

setTimeout( function() {

navprev();

}, 150 );

}

});

</script>

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

// the options
    // rotation and translation boundaries for the items transitions
    boundaries : {
        rotateX : { min : 40 , max : 90 },
        rotateY : { min : -15 , max : 15 },
        rotateZ : { min : -10 , max : 10 },
        translateX : { min : -200 , max : 200 },
        translateY : { min : -400 , max : -200 },
        translateZ : { min : 250 , max : 550 }
    }

// the options

// rotation and translation boundaries for the items transitions

boundaries : {

rotateX : { min : 40 , max : 90 },

rotateY : { min : -15 , max : 15 },

rotateZ : { min : -10 , max : 10 },

translateX : { min : -200 , max : 200 },

translateY : { min : -400 , max : -200 },

translateZ : { min : 250 , max : 550 }

}

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

<ul id="wi-el" class="wi-container">
    <li>
        <img src="images/demo1/1.jpg" alt="image1"/>
        <h4>Coco Loko</h4>
        <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
    </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <!-- ... -->
</ul>

<nav>
   <span id="nav-prev">prev</span>
   <span id="nav-next">next</span>
</nav>

<li>

<p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>

</li>

</ul>

<nav>

</nav>

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

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

<!DOCTYPE html>
<html lang="ja">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>風に飛ばされるような効果のある画像スライド用　jQueryプラグイン「Windy」サンプル　│　ぱんにゃっと/H&Y</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link rel="shortcut icon" href="http://pannyatto.firebird.jp/logo-favi.png"> 
		<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>
    </head>
    <body>
    	
        <div class="container">
		
			<header class="test-header">
			
				<h1>写真が風に飛ばされるような効果のある画像スライド用　jQueryプラグイン「Windy」サンプル</h1>
				
			</header>
			
			<section class="main">

				<div class="windy-demo">
					<ul id="wi-el" class="wi-container">
						<li><img src="images/demo/1.jpg" alt="image1"/><h4>Autumn</h4></li>
						<li><img src="images/demo/2.jpg" alt="image2"/><h4>Cool beauty</h4></li>
						<li><img src="images/demo/3.jpg" alt="image3"/><h4>flower</h4></li>
						<li><img src="images/demo/4.jpg" alt="image4"/><h4>cute</h4></li>
						<li><img src="images/demo/5.jpg" alt="image5"/><h4>healing</h4></li>
						<li><img src="images/demo/6.jpg" alt="image6"/><h4>Secret</h4></li>
						<li><img src="images/demo/7.jpg" alt="image7"/><h4>your light</h4></li>
						<li><img src="images/demo/8.jpg" alt="image8"/><h4>forest Happiness</h4></li>
						<li><img src="images/demo/9.jpg" alt="image9"/><h4>Cherry Country</h4></li>
						<li><img src="images/demo/10.jpg" alt="image10"/><h4>Early green</h4></li>
						<li><img src="images/demo/11.jpg" alt="image11"/><h4>Mono Heart</h4></li>
						<li><img src="images/demo/12.jpg" alt="image12"/><h4>Inner cloth</h4></li>
						<li><img src="images/demo/1.jpg" alt="image1"/><h4>Autumn</h4></li>
						<li><img src="images/demo/2.jpg" alt="image2"/><h4>Cool beauty</h4></li>
						<li><img src="images/demo/3.jpg" alt="image3"/><h4>flower</h4></li>
						<li><img src="images/demo/4.jpg" alt="image4"/><h4>cute</h4></li>
						<li><img src="images/demo/5.jpg" alt="image5"/><h4>healing</h4></li>
						<li><img src="images/demo/6.jpg" alt="image6"/><h4>Secret</h4></li>
						<li><img src="images/demo/7.jpg" alt="image7"/><h4>your light</h4></li>
						<li><img src="images/demo/8.jpg" alt="image8"/><h4>forest Happiness</h4></li>
						<li><img src="images/demo/9.jpg" alt="image9"/><h4>Cherry Country</h4></li>
						<li><img src="images/demo/10.jpg" alt="image10"/><h4>Early green</h4></li>
						<li><img src="images/demo/11.jpg" alt="image11"/><h4>Mono Heart</h4></li>
						<li><img src="images/demo/12.jpg" alt="image12"/><h4>Inner cloth</h4></li>
						<li><img src="images/demo/1.jpg" alt="image1"/><h4>Autumn</h4></li>
						<li><img src="images/demo/2.jpg" alt="image2"/><h4>Cool beauty</h4></li>
						<li><img src="images/demo/3.jpg" alt="image3"/><h4>flower</h4></li>
						<li><img src="images/demo/4.jpg" alt="image4"/><h4>cute</h4></li>
						<li><img src="images/demo/5.jpg" alt="image5"/><h4>healing</h4></li>
						<li><img src="images/demo/6.jpg" alt="image6"/><h4>Secret</h4></li>
						<li><img src="images/demo/7.jpg" alt="image7"/><h4>your light</h4></li>
						<li><img src="images/demo/8.jpg" alt="image8"/><h4>forest Happiness</h4></li>
						<li><img src="images/demo/9.jpg" alt="image9"/><h4>Cherry Country</h4></li>
						<li><img src="images/demo/10.jpg" alt="image10"/><h4>Early green</h4></li>
						<li><img src="images/demo/11.jpg" alt="image11"/><h4>Mono Heart</h4></li>
						<li><img src="images/demo/12.jpg" alt="image12"/><h4>Inner cloth</h4></li>

					</ul>
					<nav>
						<span id="nav-prev">prev</span>
						<span id="nav-next">next</span>
					</nav>
				</div>
				<p class="info">ボタンを押しっぱなしにすると・・・</p>
			</section>
			
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
        <script type="text/javascript" src="js/jquery.windy.js"></script>
        <script type="text/javascript">	
			$(function() {

				var $el = $( '#wi-el' ),
					windy = $el.windy( {
						// rotation and translation boundaries for the items transitions
						boundaries : {
							rotateX : { min : 40 , max : 90 },
							rotateY : { min : -15 , max : 45 },
							rotateZ : { min : -10 , max : 10 },
							translateX : { min : -400 , max : 400 },
							translateY : { min : -400 , max : 400 },
							translateZ : { min : 350 , max : 550 }
						}
					} ),
					allownavnext = false,
					allownavprev = false;

				$( '#nav-prev' ).on( 'mousedown', function( event ) {

					allownavprev = true;
					navprev();
				
				} ).on( 'mouseup mouseleave', function( event ) {

					allownavprev = false;
				
				} );

				$( '#nav-next' ).on( 'mousedown', function( event ) {

					allownavnext = true;
					navnext();
				
				} ).on( 'mouseup mouseleave', function( event ) {

					allownavnext = false;
				
				} );

				function navnext() {
					if( allownavnext ) {
						windy.next();
						setTimeout( function() {	
							navnext();
						}, 150 );
					}
				}

				function navprev() {
					if( allownavprev ) {
						windy.prev();
						setTimeout( function() {	
							navprev();
						}, 150 );
					}
				}

			});
		</script>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<!DOCTYPE html>

<head>

<title>風に飛ばされるような効果のある画像スライド用　jQueryプラグイン「Windy」サンプル　│　ぱんにゃっと/H&Y</title>

</head>

<body>

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

</header>

<li><img src="images/demo/1.jpg" alt="image1"/><h4>Autumn</h4></li>

<li><img src="images/demo/2.jpg" alt="image2"/><h4>Cool beauty</h4></li>

<li><img src="images/demo/3.jpg" alt="image3"/><h4>flower</h4></li>

<li><img src="images/demo/5.jpg" alt="image5"/><h4>healing</h4></li>

<li><img src="images/demo/6.jpg" alt="image6"/><h4>Secret</h4></li>

<li><img src="images/demo/7.jpg" alt="image7"/><h4>your light</h4></li>

<li><img src="images/demo/8.jpg" alt="image8"/><h4>forest Happiness</h4></li>

<li><img src="images/demo/9.jpg" alt="image9"/><h4>Cherry Country</h4></li>

<li><img src="images/demo/10.jpg" alt="image10"/><h4>Early green</h4></li>

<li><img src="images/demo/11.jpg" alt="image11"/><h4>Mono Heart</h4></li>

<li><img src="images/demo/12.jpg" alt="image12"/><h4>Inner cloth</h4></li>