jQuery FractionSlider と、スライダー機能満載のwordpressテーマ『SunRain』について

前回紹介した画像をアニメーションさせられるスライダー機能内蔵のwordpressテーマ『SunRain』のカスタマイズについての記事です。

icons-photo02

このテーマのスライダーにはjQuery の FractionSlider が使用されています。
FractionSliderについて理解を深めると、スライダーのカスタマイズもスムーズに行きますよ！

画像を個々に動かしたい！

トランジション等、動きをつけたい！

スライダを派手に！FLASHみたいに！

FractionSlider自体も使ったことはありませんでしたが、色々な動きが出せるみたいで面白いですね。

FractionSliderについて

紹介記事は下記です。

コリスさん
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-fractionslider.html

配布元：: FractionSlider 0.9.9.9
サイトリンク：: [browser-shot width=”600″ url=”http://jacksbox.de/stuff/jquery-fractionslider/”]

Slide options 及び Element options

画像をどんな風にアニメーションさせるか？
という設定を行うことができます。

http://jacksbox.de/stuff/jquery-fractionslider/element-option-reference/

jQueryのイージングについて

data-ease-in / data-ease-out

例えばバウンスBounceという名前だと要素がボヨンボヨンと跳ねる感じですね。
イージングの種類は下記を参考に色々変更してみて試してみましょう。

http://jqueryui.com/easing/

実際にSunRainのどこで使われてるの？

では、実際にテーマのどこでどんな風に使われているのかを確認してみます。

front-page.php

front-page.phpの中に、スライダーの要素があります。

<?php 
echo '

	<div class="slide">
	<img src="'. get_template_directory_uri() . '/images/waves.png" width="1449" height="115" data-position="240,17" data-in="left" data-delay="" data-out="left">
	<img src="'. esc_url(of_get_option('slide-image2', get_template_directory_uri() . '/images/cloud.png')).'"  data-position="50,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">
	<img src="'. esc_url(of_get_option('slide-image3', get_template_directory_uri() . '/images/powered-by.png')).'" data-position="120,120" data-in="right" data-step="2" data-out="right" >
	<img src="'. esc_url(of_get_option('slide-image4', get_template_directory_uri() . '/images/logo-back.png')).'" data-position="175,80" data-in="bottom" data-step="3" data-out="bottom" >
	<img src="'. esc_url(of_get_option('slide-image5', get_template_directory_uri() . '/images/logo-small.png')).'" data-position="185,105" data-in="fade" data-step="4" data-out="fade"  >
	<img src="'. esc_url(of_get_option('slide-image1', get_template_directory_uri() . '/images/victory.png')).'" data-position="10,550" data-delay="500" data-in="left" data-step="0" data-out="right">
	</div>
	<div class="slide">
	<img src="'. get_template_directory_uri() . '/images/box2.png" width="361" height="354" data-position="-152,142" data-in="left" data-delay="200" data-out="right">
	<img src="'. get_template_directory_uri() . '/images/box1.png" width="422" height="454" data-position="138,-152" data-in="bottomRight" data-delay="200">
	<img src="'. get_template_directory_uri() . '/images/waves.png" width="1449" height="115" data-position="240,17" data-in="left" data-delay="" data-out="left">
	<p class="slide-text1" data-position="30,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">'. esc_html(of_get_option('slide-text1', 'WordPress')) .'</p>
	<p class="slide-text2" data-position="90,30" data-in="left" data-step="2" data-delay="500" >'. esc_html(of_get_option('slide-text2', 'Most Userd CMS')) .'</p>		
	<p class="slide-text3" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="3000">'. esc_html(of_get_option('slide-text3', 'Ultimate Freedom')) .'</p>
	<p class="slide-text4" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="5500">'. esc_html(of_get_option('slide-text4', 'World Leading')) .'</p>	
	<p class="slide-text5" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="8000">'. esc_html(of_get_option('slide-text5', 'Free to Use')) .'</p>			
	<img src="'. esc_url(of_get_option('slide-image4', get_template_directory_uri() . '/images/logo-back.png')).'" data-position="215,30" data-in="bottom" data-step="3" data-out="bottom" >
	<img src="'. esc_url(of_get_option('slide-image5', get_template_directory_uri() . '/images/logo-small.png')).'" data-position="225,55" data-in="fade" data-step="4" data-out="fade"  >
	<img src="'. esc_url(of_get_option('slide-image6', get_template_directory_uri() . '/images/success.png')).'" data-position="10,600" data-in="fade" data-delay="500" data-out="bottomRight">
	</div>

'; ?>

slideクラスのdivで区切られて、２枚のスライドがあります。
なのでdivを丸っと消せばスライドが１枚になりますし、中の要素imgやpを削除すればスライダ内の要素を消すこともできます。
phpでSunRainの管理画面からアップした画像やテキストが呼び出されているのが確認できます。

data-in data-out data-position

例えば、この部分。

<img src="'. get_template_directory_uri() . '/images/waves.png" width="1449" height="115" data-position="240,17" data-in="left" data-delay="" data-out="left">

data-in="left"

data-inで画像のトランジションがどこから始まるか

data-position="240,17"

data-positionで要素の位置（inした後の終着点）
起点は0,0で確認してみるとスライダの左上起点ですね。（240,17だと上から240,左から17）

data-out="left"

data-outで画像のトランジションがどこにoutするか

が指定できる感じですね。
ただ、inがleft outがleftで
『右から出てきて左に消える』でしたね。左右については解釈の違いがあるかもしれませんね。
leftだと『左から』じゃなくて『左に向かって』だとか。

また、in out にはfadeも指定できるので、スライドじゃなくてぼやっと出現させたい（消したい）ときはこちらを指定しましょう。

data-ease-in data-ease-out

data-ease-in data-ease-outでイージングアニメーションを追加できます。
これは上記
http://jqueryui.com/easing/
に色々乗ってるので試してみて下さい。

data-step

これも色々試してみましたが、
・step無しだと全部一気に出て来る
・1,2,3と指定すると1が終わったら2、2が終わったら3・・・と順番を指定できる
・2が複数あったら2が全部出て来る
という感じですかね。

コレが終わってからコレを出したい！なんて時に使うオプションだと思います。

data-delayで時間差を作ることもできますが、それだと全部に時間を微調整しながら入れないといけないので、data-stepを使った方がやり易そうです。

data-special

data-specialは「cycle」サイクルだけを指定することができます。

通常、スライドの中にあるアニメーションは
data-inで出現し、stepやdelayで時間差を設け、各positionに配置され、全部が揃ったら一気にoutします。たぶん。

ただ、このcycleがある場合は話が別。

<p class="slide-text1" data-position="30,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">'. esc_html(of_get_option('slide-text1', 'WordPress')) .'</p>
<p class="slide-text2" data-position="90,30" data-in="left" data-step="2" data-delay="500" >'. esc_html(of_get_option('slide-text2', 'Most Userd CMS')) .'</p>		
<p class="slide-text3" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="3000">'. esc_html(of_get_option('slide-text3', 'Ultimate Freedom')) .'</p>
<p class="slide-text4" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="5500">'. esc_html(of_get_option('slide-text4', 'World Leading')) .'</p>	
<p class="slide-text5" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="8000">'. esc_html(of_get_option('slide-text5', 'Free to Use')) .'</p>

SunRain管理画面で設定できるテキスト3～5にはstep と specialが併用されています。

通常は全部が出てきてから一気に消えるアニメーションですが、
data-specialにcycleが指定されて居ると、
前の要素が終わったら次を出すということができます。

つまり、任意の画像を他の画像より先にoutできる・・・ということですね。たぶん。

まとめ

SunRainのコードを元に、色々変更したりして検証してみました。
レスポンシブにも対応しているので安心です。
上記はその中で僕が確認した動作をまとめたものです。
もし解釈に違いがあったらすみません！！

確実に言えるのは使いこなせばFlashみたいなアニメーションを実現させられるということですね。
派手な見せ方がしたい！という要望があったら導入を検討するのも良いと思います！

そういえばSunRainについての記事でした。

せっかくなのでテーマSunRainの他の部分についても触れておきます。

アイキャッチの設定について

SunRain管理画面から指定できるこのアイキャッチとテキストですが、
４つで良いんだけど・・・
と思っても、画像やテキストを消しただけでは空白要素が出力されます。

ちょっと残念。

テーマファイルはfeatured-box.phpとなります。

<?php 
foreach (range(1, 5) as $fboxn) { ?>
<span class="featured-box"> 
<img class="box-image" src="<?php echo esc_url(of_get_option('featured-image' . $fboxn, get_template_directory_uri() . '/images/featured-image' . $fboxn . '.png')) ?>"/>
<h3><?php echo esc_html(of_get_option('featured-title' . $fboxn, 'SunRain Theme for Small Business')); ?></h3>
<div class="content-ver-sep"></div><br />
<p><?php echo esc_html(of_get_option('featured-description' . $fboxn , 'The Color changing options of SunRain will give the WordPress Driven Site an attractive look. SunRain is super elegant and Professional Responsive Theme which will create the business widely expressed.')); ?></p>
</span>

<?php }  ?>

foreach分で1~5まで出力されるようになっています。
減らしたい時は5を4や3にすればOKです。

例

foreach (range(1, 4) as $fboxn)

6以上に増やしても、もちろん管理画面から画像がアップできるようになるわけではないので注意が必要です。
簡易的にやるならば、
foreach分が終了したところに

<?php 
foreach (range(1, 5) as $fboxn) { ?>
  //中略
<?php }  ?>
<!-- 6つ目以降の要素 -->
<span class="featured-box"> 
<img class="box-image" src="画像URLを指定">
<h3>静的に増やすタイトル</h3>
<div class="content-ver-sep"></div><br>
<p>静的に増やす説明文</p>
</span>

というやり方があります。

管理画面で６つ目以降を追加できるようにするにはもっとコアな部分に触れなければいけなそうなので今回はやりませんでした。
（自分にできるのか分かりませんが笑）

再度まとめ

SunRainをなんとなく使ってみることにしましたが、jQuery FractionSliderについても勉強になりました。
TOPページをランディングページっぽく派手に見せたいよ！という要望に充分応えられそうです。

スライド・アイキャッチ設定が豊富なテーマ『SunRain』のカスタマイズと、テーマで使用されているjQuery FractionSlider について

FractionSliderについて

Slide options 及び Element options

jQueryのイージングについて

実際にSunRainのどこで使われてるの？

front-page.php

data-in data-out data-position

data-ease-in data-ease-out

data-step

data-special

まとめ

そういえばSunRainについての記事でした。

アイキャッチの設定について

再度まとめ

おすすめコンテンツ

コメントを残すコメントをキャンセル

WordPress / デザインの学びはじめに

美容系のTCDテーマ

TCDテーマ 056 KADAN

【あや様】現在運用中のワードプレスに知恵袋機能を追加したい

【yama様】写真のキャプションの文字の並びについて

【halu様】カテゴリーをノーインデックスにしたら検索されなくなりますか

【まいまい様】WordPressインストール時のエラーについて

【nokoto様】画像の下の枠線について

FractionSliderについて

Slide options 及び Element options

jQueryのイージングについて

実際にSunRainのどこで使われてるの？

front-page.php

data-in data-out data-position

data-ease-in data-ease-out

data-step

data-special

まとめ

そういえばSunRainについての記事でした。

アイキャッチの設定について

再度まとめ

おすすめコンテンツ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル