【jQuery】ブランドサイトにも最適！ゴムのように弾むコンテンツスライダー

2015年5月27日2015年9月18日

【jQuery】ブランドサイトにも最適！ゴムのように弾むコンテンツスライダーで魅せる「WOBBLY SLIDESHOW EFFECT

限られたスペースの中で、効果的にコンテンツを見せていくスライダーは訴求力が高く、ブランドサイトなどにもよく使われています。今回はその中でも、ゴムのように弾みながらコンテンツを切り替えるスクリプト「WOBBLY SLIDESHOW EFFECT」をご紹介します。レスポンシブで、スマホでもスムーズに動き、見る人を楽しませてくれます。

WOBBLY SLIDESHOW EFFECT

http://tympanus.net/codrops/2014/10/24/wobbly-slideshow-effect/

使い方

①DOWNLOAD SOURCEからソース一式をダウンロード。

②ファイルを読み込む

内に、下記のファイルを読み込みます。基本の動きにdemo.cssは必要ありませんが、ページの整形に役立つので、まずは読み込んでおいて、必要部分のみ書き換えるとよいでしょう。

[HEAD内]

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slideshow.css" /> 
<script src="js/snap.svg-min.js"></script> 
<script src="js/modernizr.custom.js"></script> 

③スクリプトを記述

の閉じタグ直前で、スライダーを動かすスクリプトを記述します。
[HTML]

<script src="js/classie.js"></script> 
<script src="js/sliderFx.js"></script> 
<script> 
 (function() { 				
new SliderFx( document.getElementById('slideshow'), { 
easing : 'cubic-bezier(.8,0,.2,1)' 	
} );
})();
</script> 

④マークアップ

シンプルにすると、下記のようなソースになります。
[HTML]

<div id="slideshow" class="slideshow"> 
<ul> 
<li> 
<div class="slide"> 							
<img decoding="async" class="icon" src="img/icons/browser.svg" alt="Browser Icon"/>
<h1><span id="i-2">コンテンツタイトル</span></h1>
<p>テキスト</p> 
</div>
</li> 
<li>コンテンツを追加</li>
</div>

オプション

スピードを変更することで、コンテンツの弾む幅を大きくしたりゆっくりしたりすることが出来ます。先ほどのの閉じタグ直前で、スクリプトのspeedとeasingの値を変更します。

[HTML]

<script>
(function() {
new SliderFx( document.getElementById('slideshow'), {

speed:500, 
easing : 'ease-in-out'
} );
})();
</script>

speed…
デフォルト値は500。値を大きくすると、弾む動きがゆっくりになります。

easing…
CSS3のプロパティ「transition-timing-function」の値を入力することができます。
上記では、開始と終了の数値を手動で設定していますが、下記の４つの値でも設定が可能です。

ease：開始と終了を滑らかにする
linear：一定
ease-in：開始をゆっくりにする
ease-out：終了をゆっくりにする
ease-in-out：開始と終了をゆっくりにする

ランディングページやブランドサイトにも使えそうです。
古いブラウザに注意しながら、試してみてくださいね。