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();
});

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

関連記事

  1. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  2. Responsive Parallax Drag-slider With Transparent Letters
  3. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  4. JavaScript

    画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

  5. jR3DCarousel

    JavaScript

    レスポンシブな3Dカルーセルを実装できる「jR3DCarousel」

    jR3DCarouselはレスポンシブな3Dカルーセルを実装できるjQ…

  6. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP