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. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  2. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

  3. SweetAlert
  4. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  5. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  6. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP