[JS]かなりかっこいいアニメーションを使ったスライドショーを実装するチュートリアル
Post on:2012年4月9日
sponsors
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。
[ad#ad-2]
デモ
まずは、そのダイナミックな3Dのアニメーションをご覧ください。
スライドは5枚あり、それぞれアニメーションが異なります。
自動再生版です。
[ad#ad-2]
Responsiveデザイン対応、スライドのレイアウトもそれぞれ異なった版です。
実装
実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。
紹介記事はこちら。
HTML
jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。
実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要素）を配置します。
<section id="jms-slideshow" class="jms-slideshow"> <div class="step" data-color="color-1"> <div class="jms-content"> <h3>Some headline</h3> <p>Some text</p> <a class="jms-link" href="#">Read more</a> </div> <img src="images/1.png" /> </div> <div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30"> <!-- ... --> </div> <!-- ... --> </section>
JavaScript
ルートをjQueryのセレクタで指定し、スクリプトを実行します。また、スクリプトのオプションではサイズやマウス・キーボード操作などを設定できます。
jmpressOpts : {
// set the viewport
viewPort : {
height : 400,
width : 1300,
maxScale: 1
},
fullscreen : false,
hash : { use : false },
mouse : { clickSelects : false },
keyboard : { use : false },
animation : { transitionDuration : '1s' }
},
スクリプトのオプションは他にもいろいろあります。
動作の設定
パネルの動作は各要素で設定が可能で、下記のように指定します。
<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30"> <!-- ... --> </div>
元記事ではスクリプトの詳しい記述方法やスタイルシートなども解説されています。
sponsors
