【Javascript】３Dアニメーションで切り替わるレスポンシブのコンテンツスライダー

2015年1月11日

Contents

1 【Javascript】３Dアニメーションで切り替わるレスポンシブのコンテンツスライダー
2 ◆使い方
3 コンテンツ見出し
4 ◆アニメーションの種類
5 ◆ナビゲーション
6 ◆レスポンシブ

【Javascript】３Dアニメーションで切り替わるレスポンシブのコンテンツスライダー

奥行きのある３D効果で画像を配置し、アニメーションをしながら切り替わる「Tilted Content Slideshow」。JanvascriptとCSS3を使用して作成された、スタイリッシュなコンテンツスライダーです。
今回は、このスライダーの使い方をご紹介します。

http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/

DOWNLOAD SOURCEから、デモのソース一式をダウンロードできます。

デモはこちら

http://tympanus.net/Tutorials/TiltedContentSlideshow/

◆使い方

内との閉じタグ直前で、JS,CSSを読み込みます。
①内


<link rel="stylesheet" type="text/css" href="css/component.css" /> 
<script src="js/modernizr.custom.js"></script>

②直前


<script src="js/classie.js"></script> 		
<script src="js/tiltSlider.js"></script> 		
<script> 			
new TiltSlider( 
document.getElementById( 'slideshow' ) 
); 		
</script>

HTMLは、スライドショー部分全体にclass=”slideshow” id=”slideshow”を付与したdivで囲み、コンテンツごとに番号付きリスト「ol」のリストでくくります。
最初に表示させるコンテンツのリストにはid=”current”を付与。
また、descriptionクラス内に見出しとテキストを、tiltviewクラス内に画像を置きます。
デモには、画像部分にcolクラスも付いていますが、これはアニメーションや表示位置を調整するクラスです。
[HTML]


<div class="slideshow" id="slideshow">
<ol class="slides">
<li class="current">
<div class="description">
<h2><span id="i-2">コンテンツ見出し</span></h2>
<p>コンテンツに関するテキスト。<a href="URL">リンク</a>も使えます。</p>
</div>
<div class="tiltview">
<a href="リンクURL " class="external"><img decoding="async" src="https://www.dream-net.org/blog/wp-content/uploads/2015/01/012.jpg"/></a>
<a href="リンクURL" class="external"><img decoding="async" src="https://www.dream-net.org/blog/wp-content/uploads/2015/01/022.jpg"/></a>
</div>
</li>
<li>
<div class="description">
２つ目のコンテンツ
</div>
<div class="tiltview">
２つ目の画像
</div>
</li>
<!--繰り返し-->
</ol>
</div>

◆アニメーションの種類

上下左右にスライドするタイプやバウンドしながら上に上がるタイプなど、in、outそれぞれに６種類のアニメーションが用意されています。
tilteSlider.jsの58、59行目に下記のように記述があり、これがランダムに割り当てられます。
this.animEffectsOut = [‘moveUpOut’,’moveDownOut’,’slideUpOut’,’slideDownOut’,’slideLeftOut’,’slideRightOut’];
this.animEffectsIn = [‘moveUpIn’,’moveDownIn’,’slideUpIn’,’slideDownIn’,’slideLeftIn’,’slideRightIn’];

それぞれの動きは、component.css内で定義されています。
タイミングを微調整したい場合は、136行目「/* Individual effects */」以降を編集しましょう。