FractionSliderでは、一枚のSlideに複数の画像/テキストオブジェクトが一定の時間間隔で次々に流れ込んで、Flash動画のような高い表現力として知られています。
FractionSliderの使用説明が以外に少なく、いろいろなパラメータの使用法がテストで試さないと理解できないようで、ここで試した結果を纏めます。
FractionSliderのHTML内の定義、基本的な使い方は簡単で、FranctionSliderのドキュメントを参考にすればわかります。
FractionSliderのいくつかの表現方法は以下のようで
- 画像/テキストオブジェクトが一定の間隔でSlideに流れ込みます(基本的な表示方法)
-
- 利用するパラメータは各画像/テキストオブジェクトの配置場所(data-position)、開始時間(data-delay)、入る/出る方向(data-in/data-out)、入る/出る効果(data-ease-in/data-ease-out)
- これは一般的な利用方法で、比較的に簡単に理解ができます。
- パラメータ:data-stepを利用して、複数の画像/テキストオブジェクトをグルーピングすることができます
- Slide単位でのすべての画像/テキストオブジェクトが出そろいたら、それぞれdata-ease-outで定義された動きで一斉消えていきます。
- 背景の移動方法(あまり説明がされてない部分)
- 背景を動画のように表示するのは、二つ手法があります
- 1:Slide単位で、一枚の画像を固定(data-fixed)して、Slideタブ内でその画像の動きを定義します(例:data-in="fade")。ほかの画像/テキストオブジェクトを次のステップ(例:data-step=2)で纏めて表示させる必要があります。
- 2:Slider全体の背景を動画として設定します。背景の画像を定義している要素をFraction Sliderの初期オプション内で定義します(例: 'backgroundAnimation' : true, 'backgroundElement' : '.slider-bkg', 'backgroundX' : 500, 'backgroundY' : 500, 'backgroundSpeed' : 2500, 'backgroundEase' : 'easeOutCubic')
- 背景の動画設定1と2の区別は、1)はSlide単位の背景が移動後に、ほかのオブジェクトを移動させます。2)は全体的な背景画像がSlideが開始時に、ほかのオブジェクトと一緒に移動します。
- 画像/テキストオブジェクトをローテーションのように移動させます(特殊の使い方:data-special)
- 一枚のSlide内に、同じ配置場所(data-position)に複数のオブジェクトを一定の間隔でローテーションのように表示することができます
- この場合、複数のオブジェクトがdata-special='cycle'で定義します。
- 複数のオブジェクトの開始時刻は必ずdata-delay(例:data-delay=2000)で定義する必要があります。
- FractionSlider1.0の場合、特殊な処理は「cycle」しかありません。
FractionSlider利用の注意点としては、まず一枚のSlideに、画像/テキストオブジェクトが多ければ多いほど、端末のCPU利用率が上がり、ブラウザが重くなる危険性があります。
-
- ブラウザがJavaScriptでオブジェクトの動き定義によって、リアルタイムで計算し、描画を行います
- 端末のCPUパワーが低ければ、当然ブラウザの負担が重くなります。