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. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  3. jQuery Panorama Viewer

    JavaScript

    パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

    jQuery Panorama Viewerはパノラマビューを実装する…

  4. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  5. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  6. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

コメント

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

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

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP