Fractionslider使用方法と注意点

FractionSliderでは、一枚のSlideに複数の画像/テキストオブジェクトが一定の時間間隔で次々に流れ込んで、Flash動画のような高い表現力として知られています。

• • FractionSliderの本家：http://jacksbox.de/
  • デモページ：http://jacksbox.de/fractiondemos/example_slides.html

FractionSliderの使用説明が以外に少なく、いろいろなパラメータの使用法がテストで試さないと理解できないようで、ここで試した結果を纏めます。

FractionSliderのHTML内の定義、基本的な使い方は簡単で、FranctionSliderのドキュメントを参考にすればわかります。

FractionSliderのいくつかの表現方法は以下のようで

1. 画像/テキストオブジェクトが一定の間隔でSlideに流れ込みます(基本的な表示方法)
   
   • • 利用するパラメータは各画像/テキストオブジェクトの配置場所（data-position）、開始時間（data-delay）、入る/出る方向（data-in/data-out）、入る/出る効果（data-ease-in/data-ease-out）
     • これは一般的な利用方法で、比較的に簡単に理解ができます。
     • パラメータ：data-stepを利用して、複数の画像/テキストオブジェクトをグルーピングすることができます
     • Slide単位でのすべての画像/テキストオブジェクトが出そろいたら、それぞれdata-ease-outで定義された動きで一斉消えていきます。
2. 背景の移動方法(あまり説明がされてない部分)
   • 背景を動画のように表示するのは、二つ手法があります
     • １：Slide単位で、一枚の画像を固定(data-fixed)して、Slideタブ内でその画像の動きを定義します(例：data-in="fade")。ほかの画像/テキストオブジェクトを次のステップ(例：data-step=2)で纏めて表示させる必要があります。
     • ２：Slider全体の背景を動画として設定します。背景の画像を定義している要素をFraction Sliderの初期オプション内で定義します(例： 'backgroundAnimation' : true,  'backgroundElement' : '.slider-bkg', 　'backgroundX' : 500,  'backgroundY' : 500,  'backgroundSpeed' : 2500,  'backgroundEase' : 'easeOutCubic')
   • 背景の動画設定１と２の区別は、１）はSlide単位の背景が移動後に、ほかのオブジェクトを移動させます。２）は全体的な背景画像がSlideが開始時に、ほかのオブジェクトと一緒に移動します。
3. 画像/テキストオブジェクトをローテーションのように移動させます（特殊の使い方：data-special）
   • 一枚のSlide内に、同じ配置場所(data-position)に複数のオブジェクトを一定の間隔でローテーションのように表示することができます
     
   • この場合、複数のオブジェクトがdata-special='cycle'で定義します。
   • 複数のオブジェクトの開始時刻は必ずdata-delay(例：data-delay=2000)で定義する必要があります。
   • FractionSlider1.0の場合、特殊な処理は「cycle」しかありません。

FractionSlider利用の注意点としては、まず一枚のSlideに、画像/テキストオブジェクトが多ければ多いほど、端末のCPU利用率が上がり、ブラウザが重くなる危険性があります。

• • ブラウザがJavaScriptでオブジェクトの動き定義によって、リアルタイムで計算し、描画を行います
  • 端末のCPUパワーが低ければ、当然ブラウザの負担が重くなります。