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. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  2. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  3. socialShare.js
  4. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  5. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP