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. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  2. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  3. diamonds.js
  4. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  5. no-image
  6. RELLAX

    JavaScript

    超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

    RELLAXは、滑らかなパララックスを実装できるバニラJavaScri…

コメント

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

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

最近の記事

  1. メキシコ オアハカ
  2. ドリップ
  3. チェリー
  4. 温泉水99

アーカイブ

PAGE TOP