JavaScript

スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.js」

とても素敵なスライドアニメーションを実装することができるjQueryスライダー「Slideshow with jmpress.js」を使ってみました。滑らかで面白い動きをするので見ていて楽しいですね。使い方もとてもシンプルなので使いやすいプラグインかと思います。以下使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたプラグインを読み込みます。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jmpress.min.js"></script>
<script type="text/javascript" src="js/jquery.jmslideshow.js"></script>

スライドさせるコンテンツの記述は以下のようにします。

<section id="jms-slideshow" class="jms-slideshow">
    <!-- Slider 1 -->
    <div class="step" data-color="color-1">
        <div class="jms-content">
            <h3>Slider 1</h3>
            <p>sample text sample text sample text sample text sample text sample text </p>
            <a class="jms-link" href="#">続きを読む</a>
        </div>
        <img src="images/1.png" />
    </div>

    <!-- Slider 2 -->
    <div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
        <div class="jms-content">
            <h3>Slider 2</h3>
            <p>sample text sample text sample text sample text sample text sample text </p>
            <a class="jms-link" href="#">続きを読む</a>
        </div>
        <img src="images/2.png" />
    </div>
		
    <!-- Slider 3 -->

    ・・・略・・・

</section>

あとはスライダーをセットすればOKです。

<script type="text/javascript">
$(function() {
    $('#jms-slideshow').jmslideshow();
});
</script>

各スライドの背景色などはstyle.cssの中にあるcolor-○で設定できます。このcolor-○をdata-colorに設定することで好きな背景色にすることができます。

.color-1 {
    background-color: #E3D8FF;
    background-color: rgba(227, 216, 268, 1);
}
.color-2 {
    background-color: #EBBBBC;
    background-color: rgba(235, 187, 188, 1);
}
.color-3 {
    background-color: #EED9C0;
    background-color: rgba(238, 217, 192, 1);
}
.color-4 {
    background-color: #DFEBB1;
    background-color: rgba(223, 235, 177, 1);
}
.color-5 {
    background-color: #C1E6E5;
    background-color: rgba(193, 230, 229, 1);
}

オプションを指定する場合は以下のようにします。

<script type="text/javascript">
$(function() {
    $('#jms-slideshow').jmslideshow({
        viewPort: {
            height: 400,
            width: 1000,
            maxScale: 1
        },
        fullscreen: false,
        hash: {use: false},
        mouse: {clickSelects: false},
        keyboard: {use: false},
        animation: {transitionDuration: '1s'}
    });
});
</script>

Slideshow with jmpress.jsのダウンロードやデモ、詳しい使い方は、以下のサイトで確認することができます。

関連記事

  1. Justified Gallery
  2. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  3. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  4. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  5. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  6. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

コメント

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

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

最近の記事

  1. FE 35mm F1.8
  2. RONIN-SC
  3. プラスシェル シティ04 フォールディングカメラケース

アーカイブ

PAGE TOP