Railsアプリに「SLIDESHOW WITH JMPRESS.JS」を使って、3D効果のあるスライドショーを作る

1.「SLIDESHOW WITH JMPRESS.JS」とは

Slideshow with jmpress.js | Codropsで紹介されているjmpress.jsベースのスライドショー用jQuery Pluginです。IE8では3Dのアニメーションは使えませんが、一応IE8でも使えます。

このプラグインはjmpress.jsを使って作られているのですが、jmpress.jsはできることが多すぎて初めて使うにはやや調べることが多いです。

「SLIDESHOW WITH JMPRESS.JS」は、スライドショーの作成に特化したjmpress.jsのラッパーで、htmlにdata属性を付けていくだけでスライドショーを作成することができます。

以下にデモサイトがあって動きを見ることができます。

Slideshow with jmpress.js

2. railsアプリケーションへの設定方法

2.1. ソースコードをダウンロードして、vendorフォルダに追加

自分の場合は、ここからソースコードをダウンロードした後、vendor/assetsフォルダ以下に次のように追加。

f:id:sessan:20121114180233p:plain

もともとは、

style.css
style_alt.css
style_ie.css

というCSSがダウンロードしたzipに入っていたが、ファイル名が他のものと重複しそうなので、変更した。また、jmslideshow_mobile.cssは、jmslideshow_style.cssをコピーして作った。モバイル用にスタイルシートをMediaQueryとかで変更する場合に使いたいときのため。使わない人はこんな事しなくても良いです。

あと、zipファイルに入っていたデモサイト用のCSSは削除しています。

2.2. Rails用に画像のURLなどを修正

もともとのzipファイルのなかにあるCSSのままだとスライドを左右にページめくりする際の画像の参照URLがRailsでは動作しないので、以下のように/assetsフォルダ以下を参照しておく。その他、CSSから参照している各種画像も同様に変えた。

.jms-arrows span.jms-arrows-prev{
	background: #fff url(/assets/arrow_left.png) no-repeat 50% 50%;
	left: 0px;
	border-radius: 0px 3px 3px 0px;
}
.jms-arrows span.jms-arrows-next{
	background: #fff url(/assets/arrow_right.png) no-repeat 50% 50%;
	right: 0px;
	border-radius: 3px 0px 0px 3px;
}

なぜかrgbaで255以上の値（268）が設定されているところが数カ所あるので、255に変えておく。
変えないと本番環境ではsassのコンパイル時にシステムエラーが出ます。

/* Not supported style */
.jms-wrapper.not-supported{
	background-color: #E3D8FF;
	background-color: rgba(227, 216, 268, 1); //ここの268を255に変える。
}

2.3. Webページにスライドーショーを追加

<section id="jms-slideshow" class="jms-slideshow">
  <div class="step" data-color="color-1"  data-y="500" data-scale="0.4" data-rotate-x="30">
    <div class="jms-content">
      <h2>スライド1タイトル</h2>
      <p>スライド1コンテンツ</p>
    </div>
  </div>

  <div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
    <div class="jms-content">
      <h2>スライド1タイトル</h2>
      <p>スライド1コンテンツ</p>
    </div>
  </div>

  <div class="step" data-color="color-3"  data-x="2000" data-z="3000" data-rotate="170">
    <div class="jms-content">
      <h2>スライド1タイトル</h2>
      <p>スライド1コンテンツ</p>
    </div>
  </div>

</section>

2.4. CSSとJSを表示させるページで参照

これは、開発プロジェクトごとにやり方が違うかもしれないので、適切に追加したCSSとJSを参照すること。デモサイトのhtmlが参考になる。

IE8対策用の以下のコードも必要になるので忘れずにheader部に記載すること。

  <!--[if lt IE 9]>
  <%= stylesheet_link_tag "jmslideshow_style_ie.css"%>
  <![endif]-->

2.5. JSで画面ロード時にスライドショーの初期化処理を実行する

以下のようなコードを記載しておく

//slideshow
$(function() {
    $( '#jms-slideshow' ).jmslideshow();
});

これで、取り敢えず、動くスライドショーを設置できる。stepクラスが指定されているdivタグにdata-属性をつけることで、回転とか拡大とかアニメーションさせる位置とかを指定できる。ここらへんのオプションは、ここに載っている。

3. カスタマイズ

3.1. autoplayを設定する。

JSの初期化処理を以下のように変えるとautoplayできる

//slideshow
$(function() {

	var jmpressOpts	= {
		animation		: { transitionDuration : '2.0s' }
	};

	$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
		autoplay	: true,
		bgColorSpeed: '2.0s',
		arrows		: true,
		interval : 7000
	}));

});

ページ切り替わりアニメーションの経過時間はtranstionDurationで指定し、ページ切り替わり間のインターバルは intervalで指定する。ここに他のオプションも多少は紹介されている。

3.2. スライドとは個別に、スライド内の要素に独自のトランジションをつける

jmpressを使いこなして、このスライドショー用のラッパーをカスタマイズしまくれば、もっと良い実装はありそうだけど、スライド内の要素に独自のトランジションを簡単につける方法として、CSS3のアニメーションがある。

アクティブなスライドには、activeクラスが設定されるので、activeクラスが設定されているときとされていない時に、以下のようにCSSを設定しておけばよい。これで、スライドがactiveになったときに指定したCSSのトランジションが実行される。この例では場所を変えずにフェードインしている。

.fadeIn {
  position: absolute;
  top:23px;
  left:378px;
  -webkit-transition: all 0.8s ease-in-out 1s;
 	-moz-transition: all 0.8s ease-in-out 1s;
 	-ms-transition: all 0.8s ease-in-out 1s;
 	-o-transition: all 0.8s ease-in-out 1s;
 	transition: all 0.8s ease-in-out 1s;
}

.step:not(.active) .fadeIn{
	opacity: 0;
}

上の例では、fadeInクラスのところにposition指定などがあるが、これは、自分の実装で位置を絶対指定剃る必要があったからで、transitionとは関係ないです。

場所を移動しつつフェードインするような場合は、以下のように非表示のときに適当なマージンを入れてあげると良い。

.step:not(.active) .fadeIn{
	margin-top: 80px;
	opacity: 0;
}

というわけで、出来上がったのがウチのサイトのログイン前ページ。

setoya-blog

システム開発技術、データ分析関連でお勉強したことや、山奥生活を綴る、テンション低めなブログです。