FractionSlider

JavaScript

各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」

複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」をご紹介します。各要素ごとに異なるアニメーションを設定できたり、とても面白い動きを与えることができます。ユーザーの目線を集中させることができそうですね。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。

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

マークアップはこんな感じで。

<div class="slider">
    <div class="slide"><!-- 1番目のスライド --></div>
    <div class="slide"><!-- 2番目のスライド --></div>
    <!-- ・・・中略・・・ --->
</div>

各要素のスライドし終わったあとの最終的な位置を設定するにはdata-positionをセットします。/p>

<img src="画像パス" data-position="100,100" />

左からスライドさせるか右からスライドさせるかを決める場合にはdata-inを使用します。値はleftかrightを指定すればOKです。

<img src="画像パス" data-in="left">

inの時とは逆にout時はdata-outを使用します。

<img src="画像パス" data-out="left">

他にもdata-delayなどもセットすることができます。

で、あとはプラグインをスタートさせます。

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

オプションも色々あるので自分のサイトに合わせてカスタマイズしていくとよさそうです。

ブラックとホワイトの色を使ったWebサイトブラックとホワイトの色を使った29のWebサイト前のページ

悪条件下でもレンズ交換がしやすくなるエツミのデジタルチェンジングバッグMを購入次のページエツミのデジタルチェンジングバッグM

関連記事

  1. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  2. Vimeo Carousel Gallery
  3. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  4. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  5. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  6. Chameleon.js

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP