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. Rainbow.js
  2. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  3. OverlayScrollbars
  4. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  5. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  6. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP