jquery Slider Revolution / jQuery スライダープラグイン

CATEGORY: jQuery | TAG:

2014年7月24日

レスポンシブ対応で多機能なスライダープラグイン Slider Revolution (Version 4.5 SkyWood) の使い方等に関するメモ。

価格：$12
ダウンロード（販売元）：codecanyon

Slider Revolution のダウンロード（購入）とインストールに関しては以下のページをご参照ください。

関連ページ：Slider Revolution / jQuery プラグインのダウンロードとインストール

WordPress 用のプラグインに関しては以下のページをご参照ください。

関連ページ： Slider Revolution / WordPress スライダープラグイン

Slider_Revolution_jQusage_01

以下のページの上部のタブ（番号）をクリックすると、いろいろなサンプルの解説があります。

Slider Revolution のサンプル

目次

フォルダ構成

ダウンロードして解凍した中の「examples&source」フォルダの中にプラグイン本体の「rs-plugin」フォルダがある。また「examples&source」フォルダの中にはいろいろなサンプルがあるので参考に。

ここでのフォルダ構成は以下のとおり。

Slider_Revolution_jQusage_02

  • CSS フォルダ：スタイル設定用の CSS ファイルを格納。
    style.css 「examples&source」フォルダ内の「css」フォルダに入っているのでコピー
  • images フォルダ：スライド等に使用する画像を格納
  • rs-plugin フォルダ：プラグイン本体（CSS やナビゲーションの画像などを含む）

必要なファイルの読み込み

  • head 内でまず最初に jQuery を読み込む。（google apis を使って読み込むことが推奨されている）
  • 続いて Slider Revolution の JavaScript や CSS を読み込む。
  • ファイルの位置（パス）は環境に合わせて指定。

head 内での読み込みの例

<head>
・・・中略・・・
<title>タイトル</title>
<!-- google apis 経由での jQuery の読み込み-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<!-- SLIDER REVOLUTION 4.x SCRIPTS（プラグインのスクリプト）  -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS（プラグインのCSS） -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

<!-- GOOGLE FONTS（オプション） -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

<!-- スタイル設定用 CSS-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

</head>

コンテナとスライダーのマークアップ

スライダー（Slider Revolution のドキュメントでは banner と呼ばれている）を収納するコンテナとスライダーの div 要素を記述。

  • クラス名はそれぞれ任意のものを指定できるが、ダウンロードした style.css を使用する場合は以下のクラスを使用すると便利。
  • それぞれのクラス名はスタイルの指定などで使用。
  • スライダーのクラス名は（以下の例では tp-banner ）プラグインのイニシャライズで使用。

以下はレスポンシブのスライダの例。

<div class="tp-banner-container"><!-- スライダーのコンテナ -->
    <div class="tp-banner" ><!-- スライダー --></div>
</div>

ダウンロードした style.css の内容。全幅にする場合はクラス「tp-banner-fullscreen-container」を指定。

.boxedcontainer    {  max-width: 1170px; margin:auto; padding:0px 30px;}

/*********************************************
  -  SETTINGS FOR BANNER CONTAINERS  -
**********************************************/

.tp-banner-container{
  width:100%;
  position:relative;
  padding:0;

}

.tp-banner{
  width:100%;
  position:relative;
}

.tp-banner-fullscreen-container {
    width:100%;
    position:relative;
    padding:0;
}

スライドのマークアップ

  • スライダーはいくつかのスライドから構成される。
  • それぞれのスライドはその中にキャプションや画像、ビデオなどのレイヤーを持つことができる。
  • スライダーは div 要素で記述してその中に ul 要素を記述。
  • １つ１つのスライドは li 要素で記述。
<div class="tp-banner-container"><!-- スライダーのコンテナ  -->
    <div class="tp-banner" ><!-- スライダー  -->
        <ul>
            <!-- スライド1  -->
            <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                <!-- MAIN IMAGE メインの背景画像 -->
                <img src="images/forest1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                <!-- LAYERS -->
                <!-- LAYER NR. 1 キャプション-->
                <div class="tp-caption skewfromrightshort fadeout largegreenbg"
                    data-x="25"
                    data-y="224"
                    data-speed="500"
                    data-start="1200"
                    data-easing="Power4.easeOut">Caption テキストや HTML（h1, img, iframe, etc）
                </div>           

            </li>
            <!-- スライド2  -->
            <li data-transition="random" data-slotamount="7" data-masterspeed="700" >
                <!-- MAIN IMAGE -->
                <img src="images/fullslide2.jpg"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                <!-- LAYERS -->
                <!-- LAYER NR. 1 -->
                <div class="tp-caption skewfromright fadeout modern_big_redbg"
                    data-x="85"
                    data-y="224"
                    data-speed="500"
                    data-start="1200"
                    data-easing="Power4.easeOut">Caption テキストや HTML
                </div>               
            </li>
            ・・・・

        </ul>
    </div>
</div>

Slider Revolution プラグインのイニシャライズ

body 要素の閉じタグ（</body>）の直前等、フッターのあたりに以下のようにプラグインをイニシャライズするコードを記述。

イニシャライズにはスライダーの div 要素のクラスを指定（この例では .tp-banner ）して、オプションを指定する（ここでは一部のオプションのみ指定）。

プラグインのイニシャライズの例

<script>
jQuery(document).ready(function() {
    jQuery('.tp-banner').revolution(
        {
            delay:3000,
            startwidth:1170,
            startheight:658
        });
});
</script>
</body>
</html>

単純なスライダーの作成例

以下はキャプション（レイヤー）を含まない、メイン画像のスライドだけで構成される単純なスライダーの例。

サンプル１

各スライドにはアニメーションの設定（data-transition=”random”）、画像を分割表示する場合の値（data-slotamount）、アニメーションの時間（data-masterspeed）を指定。その他はデフォルト。

イニシャライズの際にスライドの表示時間や幅、高さ、ナビゲーションのスタイル、影のスタイルを指定。

HTML

<div class="tp-banner-container">
    <div class="tp-banner" >
        <ul>
            <!-- スライド１  -->
            <li data-transition="random" data-slotamount="7" data-masterspeed="800">
                <!-- MAIN IMAGE メインの背景画像 -->
                <img src="images/bg960x360_01.jpg"  alt="street1">
            </li>
            <!-- スライド２  -->
            <li data-transition="random" data-slotamount="6" data-masterspeed="700" >
                <!-- MAIN IMAGE メインの背景画像 -->
                <img src="images/bg960x360_02.jpg"  alt="street2">             
            </li>
            <!-- スライド３  -->
            <li data-transition="random" data-slotamount="5" data-masterspeed="900" >
                <!-- MAIN IMAGE メインの背景画像 -->
                <img src="images/bg960x360_03.jpg"  alt="roof">              
            </li>
        </ul>
    </div>
</div>

jQuery（イニシャライズ）

<script>
jQuery(document).ready(function() {
  jQuery('.tp-banner').revolution(
  {
    delay:3000,    //スライドの表示時間（3秒）
    startwidth:960,   //スライダーの幅
    startheight:360,   //スライダーの高さ
    navigationStyle: "preview3",   //ナビゲーションのスタイル
    shadow:2   //シャドウのスタイル
  });
  });
</script>

以下は上記の例にキャプション（レイヤー）を追加した例。

サンプル２

キャプション（レイヤー）は div 要素で記述して、クラス「tp-caption」を指定。

  • tp-caption ：キャプション（レイヤー）を表すクラス（必須）
  • skewfromrightshort ：開始時のアニメーションの種類を指定
  • ltb ：終了時のアニメーションの種類を指定
  • very_large_text ：キャプションのスタイル（settings.css で設定されている）

また、data- 属性を使って位置やアニメーションのタイミング、スピード等を指定。

HTML

<div class="tp-banner-container">
    <div class="tp-banner" >
        <ul>
            <!-- スライド１  -->
            <li data-transition="random" data-slotamount="7" data-masterspeed="800">
                <!-- MAIN IMAGE メインの背景画像 -->
                <img src="images/bg960x360_01.jpg"  alt="street1">
                <!-- LAYERS キャプション（レイヤー）-->
                <div class="tp-caption skewfromrightshort ltb very_large_text"
                    data-x="center"
                    data-y="center"
                    data-speed="700"
                    data-start="1200"
                    data-splitin="chars"
                    data-elementdelay ="0.1"
                    data-splitout="chars"
                    data-endelementdelay ="0.1"
                    data-end="2200"
                    data-endspeed="500"
                    data-easing="Power4.easeOut">Barcelona
                </div>
            </li>
            <!-- スライド２  -->
            <li data-transition="random" data-slotamount="6" data-masterspeed="700" >
                <!-- MAIN IMAGE メインの背景画像 -->
                <img src="images/bg960x360_02.jpg"  alt="street2"> 
                <!-- LAYERS キャプション（レイヤー）-->
                <div class="tp-caption skewfromrightshort ltt large_text"
                    data-x="center"
                    data-y="bottom"
                    data-speed="500"
                    data-start="500"
                    data-splitin="chars"
                    data-elementdelay ="0.1"
                    data-splitout="chars"
                    data-endelementdelay ="0.1"
                    data-end="1800"
                    data-endspeed="500"
                    data-easing="Power4.easeOut">Miro on the street
                </div>            
            </li>
            <!-- スライド３  -->
            <li data-transition="random" data-slotamount="5" data-masterspeed="900" >
                <!-- MAIN IMAGE メインの背景画像 -->
                <img src="images/bg960x360_03.jpg"  alt="roof">  
                <!-- LAYERS キャプション（レイヤー）-->
                <!-- LAYER 1 -->
                <div class="tp-caption skewfromrightshort randomrotate medium_bold_orange"
                    data-x= "right"
                    data-hoffset="-200"
                    data-y="top"
                    data-voffset="100"
                    data-speed="500"
                    data-start="500"
                    data-splitin="chars"
                    data-elementdelay ="0.1"
                    data-splitout="chars"
                    data-endelementdelay ="0.1"
                    data-end="2200"
                    data-endspeed="700"
                    data-easing="Power4.easeOut">Gaudi in the sky
                </div>
                <!-- LAYER 2 -->  
                <div class="tp-caption randomrotate ltl"
                    data-x= "center"
                    data-y="center"
                    data-speed="500"
                    data-start="1500"
                    data-end="2900"
                    data-endspeed="500"
                    data-easing="Power4.easeOut"><img src="images/gaudi.jpg"  alt="gaudi">
                </div>           
            </li>
        </ul>
    </div>
</div>

jQuery（イニシャライズ）

<script>
jQuery(document).ready(function() {
  jQuery('.tp-banner').revolution(
  {
    delay:4000,
    startwidth:960,
    startheight:360,
    navigationStyle: "preview1",
    shadow:3
  });
  });
</script>

オプションや設定可能な data- 属性については以下をご覧ください。

オプションの設定

プラグインをイニシャライズする際のオプション

以下はオプションの例（一部抜粋。他にもオプションあり）

Slider_Revolution_jQusage_03

グローバル・オプション
Global Settings
オプション 値・意味
delay １つのスライドの表示時間をミリ秒で指定（デフォルトは 9000 ）。個々のスライドの表示時間は li 要素の「data-delay」属性で指定してグローバルの設定を上書き可能。
startheight キャプション等を表示する（スライダーの）領域の高さをピクセル（px）で指定（単位は不要）。Fullwidth（全幅） と Responsive（レスポンシブ）のレイアウトではこれがスライダーの「Max height」になる。 Fullscreen（フルスクリーン）レイアウトではもしスライダーの高さがこの値より大きい場合は垂直方向にセンタリングされる。
startwidth キャプション等を表示する（スライダーの）領域の幅をピクセル（px）で指定（単位は不要）。Responsive（レスポンシブ）のレイアウトではこれがスライダーの「Max Width」になる。 Fullwidth（全幅） と Fullscreen（フルスクリーン）レイアウトではもしスライダーの幅がこの値より大きい場合は水平方向にセンタリングされる。
ナビゲーション・オプション
Navigation Settings
オプション 意味 設定可能な値
keyboardNavigation スライダーがフォーカスされている時に、左右の矢印キーを使ってのナビゲーションを有効にするかどうか。 “on”, “off”
onHoverStop マウスがスライダーにホバーした際にスライダーを停止するかどうか。キャプションのアニメーションは停止しない。 “on”, “off”
thumbWidth / thumbHeight サムネイルの幅と高さをピクセルで指定。サムネイルはレスポンシブではないので、必要であればメディア・クエリを使ってサイズを指定する。 整数値
thumbAmount 一度に表示するサムネイルの数。 整数値
hideThumbs ナビゲーションの矢印、サムネイル、アイコン（bullet）を指定した時間後、非表示にする。「0」を指定すると常に表示。 1000- 100000 （ミリ秒で指定）
navigationType “bullet/thumbnail”バーの表示スタイル “bullet”, “thumb”, “none”
navigationArrows ナビゲーションの矢印の表示位置。nexttobullets：bullet の左右に表示、solo：スライドの左右に表示 “nexttobullets”, “solo”
navigationStyle navigationType を “bullet” に設定している場合のナビゲーションのスタイル。 “preview1”, “preview2″,”preview3″,”preview4″,”round”, “square”, “round-old”, “square-old”, “navbar-old”
touchenabled タッチデバイスでのスワイプ機能を有効にするかどうか。 (Default: “on”) “on”, “off”
ループ・オプション
Loops
オプション 意味 設定可能な値
startWithSlide 指定したスライドのインデックスからスライドを開始（最初のスライドのインデックスは 0） 整数値
stopAtSlide 指定したスライドに達したら停止。次項の「stopAfterLoops」を指定する必要がある。「stopAfterLoops」を「0」に指定していれば、最初のループでそのスライドに達したら停止する。もし「-1」を指定したら停止しない。その場合は「stopAfterLoops」の値は意味を持たない。 整数値
stopAfterLoops 指定したループの回数後、「stopAtSlide」で指定したスライドに達したら停止。「-1」を指定したら自動的には停止しない。 整数値
モバイル・オプション
Mobile Visibility
オプション 意味 設定可能な値
hideAllCaptionAtLimit 指定したブラウザの幅（ピクセル）以下ではキャプションを非表示にする。 整数値
hideThumbsOnMobile モバイルデバイスでサムネイルを表示するかどうか。 “on”, “off”
hideBulletsOnMobile モバイルデバイスで Bullets を表示するかどうか。 “on”, “off”
hideArrowsOnMobile モバイルデバイスでナビゲーションの矢印を表示するかどうか。 “on”, “off”
レイアウト・オプション
Layout Styles
オプション 意味 設定可能な値
spinner ローダー（spinner）の画像の選択。指定がなければベーシックなローダー画像。 “spinner1” , “spinner2”, “spinner3” , “spinner4”, “spinner5”
hideTimerBar タイマー・バーの表示・非表示 “on” , “off”
fullWidth fullwidth/autoresponsive モードを有効にするかどうか。 “on”, “off”
autoHeight fullwidth モードでの高さの設定。”off” の場合、最大の高さは「startheight」の値になる。 “on”, “off”
fullScreen fullScreen モードを有効にするかどうか。 “on”, “off”
shadow スライダーの下にシャドウ（影）を表示するかどうか。(0 ：シャドウを表示しない。 1,2,3 – 異なるシャドウのタイプ) 0,1,2,3
dottedOverlay メインの背景画像の上にドット模様（オーバーレイ）を表示するかどうか。 “none”, “twoxtwo”, “threexthree”, “twoxtwowhite”, “threexthreewhite”
パララックス・オプション
Parallax Settings
オプション 意味 設定可能な値
parallax 何の動きに対してパララックスを設定するか。（モバイルデバイスでは scroll は無効） “mouse” , “scroll”
parallaxDisableOnMobile パララックス効果をモバイルデバイスで有効にするかどうか。 “on”, “off”

スライド

１つのスライドは１つの li 要素から構成される。トランジション（アニメーション）、リンク等を設定するにはそれぞれの li 要素の「data- values」属性（values はオプションにより異なる文字列）を使って設定することができる。

例

<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >

スライドのオプション

スライドのアニメーション（Transition Effects）

data-transition

スライドのアニメーションは「data-transition」属性で指定する。２つ以上を指定することが可能でその場合、ループごとに次のアニメーションで表示される。

以下のアニメーションを指定可能。

Flat Transitions:
  • 説明 – 設定する値
  • Slide To Top – slideup
  • Slide To Bottom – slidedown
  • Slide To Right – slideright
  • Slide To Left – slideleft
  • Slide Horizontal (depending on Next/Previous) – slidehorizontal
  • Slide Vertical (depending on Next/Previous) – slidevertical
  • Slide Boxes – boxslide
  • Slide Slots Horizontal – slotslide-horizontal
  • Slide Slots Vertical – slotslide-vertical
  • Fade Boxes – boxfade
  • Fade Slots Horizontal – slotfade-horizontal
  • Fade Slots Vertical – slotfade-vertical
  • Fade and Slide from Right – fadefromright
  • Fade and Slide from Left – fadefromleft
  • Fade and Slide from Top – fadefromtop
  • Fade and Slide from Bottom – fadefrombottom
  • Fade To Left and Fade From Right – fadetoleftfadefromright
  • Fade To Right and Fade From Left – fadetorightfadefromleft
  • Fade To Top and Fade From Bottom – fadetotopfadefrombottom
  • Fade To Bottom and Fade From Top – fadetobottomfadefromtop
  • Parallax to Right – parallaxtoright
  • Parallax to Left – parallaxtoleft
  • Parallax to Top – parallaxtotop
  • Parallax to Bottom – parallaxtobottom
  • Zoom Out and Fade From Right – scaledownfromright
  • Zoom Out and Fade From Left – scaledownfromleft
  • Zoom Out and Fade From Top – scaledownfromtop
  • Zoom Out and Fade From Bottom – scaledownfrombottom
  • ZoomOut – zoomout
  • ZoomIn – zoomin
  • Zoom Slots Horizontal – slotzoom-horizontal
  • Zoom Slots Vertical – slotzoom-vertical
  • Fade – fade
  • Random Flat – random-static
  • Random Flat and Premium – random
Premium Transitions:
  • Curtain from Left – curtain-1
  • Curtain from Right – curtain-2
  • Curtain from Middle – curtain-3
  • 3D Curtain Horizontal – 3dcurtain-horizontal
  • 3D Curtain Vertical – 3dcurtain-vertical
  • Cube Vertical – cube
  • Cube Horizontal – cube-horizontal
  • In Cube Vertical – incube
  • In Cube Horizontal – incube-horizontal
  • TurnOff Horizontal – turnoff
  • TurnOff Vertical – turnoff-vertical
  • Paper Cut – papercut
  • Fly In – flyin
  • Random Premium – random-premium
  • Random Flat and Premium – random

data-slotamount

アニメーションの際、画像が分割されて表示する効果が使われる場合、画像をいくつに分割するかを指定。「boxfade」を使用する場合は、８つ以上に分割するとジャギー（ギザギザ？）になる。

data-masterspeed

アニメーションのスピードをミリ秒で指定。デフォルトは 300（0.3秒）

data-delay

スライドの表示時間。グローバル・オプションで指定した「delay」の値を上書きする。（指定しなければグローバル・オプションで指定した「delay」の値が適用される）

リンク

スライド（メイン画像全体）へのリンクの設定

data-link

リンク先の URL を指定。
例：data-link=”http://www.example.com”

data-target

“_blank”, “_self” 等を指定
例：data-target=”_blank”

サムネイル

data-thumb

サムネイル画像へのパスの指定。この値が設定されなければ背景画像を縮小したものがサムネイルとして使用される。

タイトル

data-title

ナビゲーション・オプションの「navigationStyle」を Preview1～preview4 に指定した場合、それぞれのスライドに以下の属性を使ってタイトルを設定できる。

メイン背景画像

各スライド（<li> </li>）は１つのメイン背景画像（ img 要素）を含む必要がある。メイン背景画像は写真の画像、透明や色の付いた画像などを指定することができる。以下は背景画像の設定の例。

Simple Image（通常の背景画像の指定）

<img src="images/slides/slide13.jpg" >

Colored Background Instead of Image

<img src="images/slides/transparent.png" style="background-color:#56e34a" >

Lazy Loaded Image

<img src="images/slides/dummy.jpg" data-lazyload="images/slides/slide13.jpg">

Tiled Image

<img src="images/slides/slide13.jpg" data-bgrepeat="repeat" data-bgfit="normal" data-bgposition="center center">

Fitting Image

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="contain" data-bgposition="center center">

Covering Image

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="center center">

Bottom Right Aligned Covering Image

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="right bottom">

Ken Burns Animation on Image

<img src="images/kenburns1.jpg" alt="kenburns1" data-bgposition="left bottom" data-kenburns="on" data-duration="2000" data-ease="Power4.easeInOut" data-bgfit="200" data-bgfitend="100" data-bgpositionend="center top">

メイン背景画像の img 要素に設定できる属性

設定例は上記の背景画像の設定の例を参照。

Lazy Loading
src 属性にダミー画像（透明な小さな画像、例：5pxの正方形画像）を指定して（ src=”images/slides/dummy.jpg”）data-lazyload 属性にメイン背景画像のパスを指定する。これにより画像をロードする時間を短縮できる。
Background Repeat
data-bgrepeat 属性に no-repeat / repeat / repeat-x / repeat-y のいずれかを指定。
Background Fit
data-bgfit 属性に cover / contain / normal / width(%) height(%) のいずれかを指定。「Ken Burn」を利用する場合は数値で指定。
Background Fit End
data-bgfitend 属性に数値を指定。300 を指定すると 300% ズーム。
Background Position
data-bgposition 属性に次のいずれかを指定。left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom
Background Position End
data-bgpositionend 属性に次のいずれかを指定。left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom
Ken Burns Effect
「Ken Burns Effect」を有効にするには、data-kenburns 属性に on を指定。無効にするには off を指定。
Duration for Ken Burns
data-duration 属性に「Ken Burns Effect」のアニメーションの時間をミリ秒で指定。
Easing of Ken Burns Effect
data-ease 属性に「Ken Burns Effect」のアニメーションのイージングを指定。キャプションのイージングと同じ値が使用できる。

キャプション（レイヤー）

  • 各スライドはキャプション（レイヤー）を無制限に持つことができる。
  • キャプションはテキストや HTML（iframe, image, heading , paragraph 等）で記述。
  • それぞれのキャプションは div 要素（<div class=”caption”></div>）で囲む必要がある。

またそれぞれのキャプションにはアニメーションの種類を指定したり、位置やスピード等を指定する特別なクラスや属性（data-xxxx）がある。

キャプションのクラス

“caption” または “tp-caption”
キャプションを設定するのに必須のクラス。このクラスを指定しないとプラグインはその div 要素をキャプション（レイヤー）として認識できない。（ドキュメントでは “caption” となっているが、サンプルでは “tp-caption” となっている）
スタイル用のクラス(“big_white”, “big_orange”, “medium_grey” 等)
「settings.css」で設定されているスタイル用のクラス（サンプル）。独自のスタイルを style.css 等に設定することも可能。
パララックス用クラス（”rs-parallaxlevel-1″, “rs-parallaxlevel-2”, “rs-parallaxlevel-3” 等）
それぞれのレイヤーのパララックスレベルを指定するのに使用（パララックスオプションが有効の場合）。
アニメーションクラス
アニメーションクラスでは開始と終了のアニメーションの種類を指定できる。
例：class=”tp-caption lfb ltl”
開始時のアニメーションクラス
値 – 意味（説明）
sft – Short from Top
sfb – Short from Bottom
sfr – Short from Right
sfl – Short from Left
lft – Long from Top
lfb – Long from Bottom
lfr – Long from Right
lfl – Long from Left
skewfromleft – Skew from Left
skewfromright – Skew from Right
skewfromleftshort – Skew Short from Left
skewfromrightshort – Skew Short from Right
fade – fading
randomrotate- Fade in, Rotate from a Random position and Degree
customin – 独自のアニメーションを指定することも可能（省略）
終了時のアニメーションクラス
stt – Short to Top
stb – Short to Bottom
str – Short to Right
stl – Short to Left
ltt – Long to Top
ltb – Long to Bottom
ltr – Long to Right
ltl – Long to Left
skewtoleft – Skew to Left
skewtoright – Skew to Right
skewtoleftshort – Skew Short to Left
skewtorightshort – Skew Short to Right
fadeout – fading
randomrotateout- Fade in, Rotate from a Random position and Degree
customout – 独自のアニメーションを指定することも可能（省略）

キャプションの data- 属性

data-x
水平方向の位置の指定。”left”, “center”, “right” または -2500 から 2500 の間の数値が指定可能。数値で指定した場合は、左端からのピクセルでの距離。
data-y
垂直方向の位置の指定。 “top”, “center”, “bottom” または -2500 から 2500 の間の数値が指定可能。数値で指定した場合は、トップからのピクセルでの距離。
data-hoffset
data-x に left/center/right を指定した場合のみ有効な 水平方向のオフセット。例えば data-x=”center” data-hoffset=”-100″ と指定すると、キャプションをセンターから 100px 左に配置。
data-voffset
data-y に top/center/bottom を指定した場合のみ有効な 垂直方向のオフセット。例えば data-y=”top” data-voffset=”100″ と指定すると、キャプションをトップから 100px 下に配置。
data-speed
キャプションの（開始時の）アニメーションの時間をミリ秒で指定。
data-splitin
テキストを分割する（開始時の）アニメーション。指定できる値は “words”, “chars” または “lines”。次の「data-elementdelay」も設定する必要がある。
data-elementdelay
テキストを分割する（開始時の）アニメーションの時間を 0 から 1 の間の少数で指定。”words（単語）”や”chars（文字）”の数が多い場合は値を小さくする。
data-splitout
テキストを分割する（終了時の）アニメーション。指定できる値は “words”, “chars” または “lines”。「data-end」が設定されている場合のみ有効。また、次の「data-endelementdelay」も設定する必要がある。
data-endelementdelay
テキストを分割する（終了時の）アニメーションの時間を 0 から 1 の間の少数で指定。”words（単語）”や”chars（文字）”の数が多い場合は値を小さくする。
data-start
開始時のキャプションが表示されるタイミングをミリ秒で指定。
data-easing
開始時のアニメーションのイージングの指定。以下が指定可能。
New Easings:Linear.easeNone Power0.easeIn (linear), Power0.easeInOut (linear), Power0.easeOut (linear), Power1.easeIn, Power1.easeInOut, Power1.easeOut, Power2.easeIn, Power2.easeInOut, Power2.easeOut, Power3.easeIn, Power3.easeInOut, Power3.easeOut, Power4.easeIn, Power4.easeInOut, Power4.easeOut, Quad.easeIn (same as Power1.easeIn), Quad.easeInOut (same as Power1.easeInOut), Quad.easeOut (same as Power1.easeOut), Cubic.easeIn (same as Power2.easeIn), Cubic.easeInOut (same as Power2.easeInOut), Cubic.easeOut (same as Power2.easeOut), Quart.easeIn (same as Power3.easeIn), Quart.easeInOut (same as Power3.easeInOut), Quart.easeOut (same as Power3.easeOut), Quint.easeIn (same as Power4.easeIn), Quint.easeInOut (same as Power4.easeInOut), Quint.easeOut (same as Power4.easeOut), Strong.easeIn (same as Power4.easeIn), Strong.easeInOut (same as Power4.easeInOut), Strong.easeOut (same as Power4.easeOut), Back.easeIn, Back.easeInOut, Back.easeOut, Bounce.easeIn, Bounce.easeInOut, Bounce.easeOut, Circ.easeIn, Circ.easeInOut, Circ.easeOut, Elastic.easeIn, Elastic.easeInOut, Elastic.easeOut, Expo.easeIn, Expo.easeInOut, Expo.easeOut, Sine.easeIn, Sine.easeInOut, Sine.easeOut, SlowMo.ease

Old Easings: easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce

data-endspeed
キャプションの終了時のアニメーションの時間をミリ秒で指定。
data-end
終了時のキャプションが表示されるタイミングをミリ秒で指定。
data-endeasing
終了時のアニメーションのイージングの指定。設定可能な値は「data-easing」と同じ。

 

開示情報

この記事には製品へのアフィリエイトの外部リンクが含まれています。そのリンクを通じて製品を購入された場合、当サイトにコミッションが入る可能性があります。

アフィリエイトリンクを通して購入をされたくない場合は、検索等で目的の製品のページをお探しください。

 

300x250