[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider

スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。

Fraction Slider

• Fraction Sliderのデモ
• Fraction Sliderの使い方

デモ

デモは前述のトップページの他に、3種類あります。
まずは、パネルをステップごとにアニメーションでスライドさせるデモから。

デモ：Step
パネルがそれぞれ順番にアニメーションでスライドします。

コントロールは前面のパネルだけでなく、背景も異なるタイミングで異なるアニメーションを適用できます。

デモ：Background Animation
パネルがスライドしている間は背景もアニメーションし、静止すると背景も静止します。

最後はアニメーションの基本のデモ。
八方向からそれぞれのパネルがスライドします。

デモ：Animation Basic
それぞれ対角にアニメーションでスライドします。

Fraction Sliderの使い方

実装は非常にシンプルです。

Step 1: 外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。

<link rel="stylesheet" href="fractionslider.css">
<script src="jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="jquery.fractionslider.js" type="text/javascript" ></script>

Step 2: HTML

スライダーの基本構造は、各スライドをdiv要素で配置するだけです。

<div class="slider> <!-- your slider container -->
  <div class="slide> <!-- all elements for the first slide --> </div>
  <div class="slide> <!-- all elements for the second slide --> </div>
  <!-- and so on -->
</div>

スライド内ではHTMLの全ての要素を配置することができます。もちろんclassなどを使いスタイルすることも自由です。

配置した要素の個々のポジションは「data-position」を使用します。
※下記、スクリプトのオプションを参考

<img src="path/to/image" data-position="100,100">

Step 3: JavaScript

あとは、jQueryのセレクタでスライダーを指定し、スクリプトを実行するだけです。

jQuery(window).load(function(){
 $('.slider').fractionSlider();
});

スクリプトのオプション

data-position

スライダー内におけるエレメントのポジション

data-in

トランジションが始める方向

data-ease-in

トランジション用のイージング

data-speed

トランジションのスピード

data-delay

トランジションのスタートの遅延

data-out

トランジションが終わる方向

data-ease-out

トランジションが終わる時のイージング

data-step

異なるステップで要素をまとめる

data-special

現在はサイクルのみで、前の要素と連動させる