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. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

  2. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

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

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  4. jquery.horizonScroll.js
  5. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  6. GoogleSheets-HTMLImporter

コメント

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

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

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP