FilmRoll

JavaScript

中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

FilmRollというjQueryプラグインを使えば中央に来た項目に焦点を当てることができるカルーセルを実装することができます。実際のデモでは中央に来た項目が黄色い枠で囲まれます。また、項目を動かさずに黄色い枠だけを移動させたりも出来ます。以下は使い方です。

[ads_center]

FilmRollの使い方

FilmRoll

FilmRoll

このように、中央に来た項目を強調させることができます。カルーセル自体がシンプルなので見やすいですね。プラグインが軽量なのも嬉しいです。

FilmRollを読み込み、

<script src="js/jquery.film_roll.js"></script>

コンテンツをHTMLでマークアップ。各項目を内包する親要素にはfilm_rollというidを付与しておきます。

<div id="film_roll">
    <div>
        <a href="..."><img src="..."></a>
    </div>
    <div>
        <a href="..."><img src="..."></a>
    </div>
</div>

そしてFilmRollを呼び出します。

<script>
$(function() {
    fr = new FilmRoll({
        container: '#film_roll',
        height: 330
    });
});
</script>

オプションも用意されているので、気になる方は是非チェックしてみて下さい。

blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」前のページ

Nexus7(2013)でスクリーンショットを撮る方法と保存場所次のページNexus7でスクリーンショットの撮り方と保存場所

関連記事

  1. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

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

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  4. no-image
  5. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  6. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP