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のダウンロードやデモ、詳しい使い方は、以下のサイトで確認することができます。

Gmailでゴミ箱に捨てたメールを元に戻す(復元)やり方前のページ

右クリックでキャッシュ、クッキー、履歴を消すことができるChrome拡張機能「Clear」次のページ

関連記事

  1. Progressively

    JavaScript

    画像を徐々に読み込んでくれるJSライブラリ「Progressively」

    Progressivelyは画像を徐々に読み込ませることができるJSラ…

  2. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  3. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

  4. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

  5. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  6. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP