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

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

サイトのキャプチャ

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
現在はサイクルのみで、前の要素と連動させる

top of page

©2017 coliss