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. 抹茶クリームドーナツ
  2. FAST
  3. クリスマスブレンド
  4. ホワイトチョコマカダミアドーナツ
  5. エッグペペ
PAGE TOP