2つの画像の動きを対比させて見せる

スライドショー
-2つの画像の動きを対比させて見せる-

デモページを見る

See the Pen 6-1-9 2つの画像の動きを対比させて見せる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の動きを確かめてね!

動きを実現する仕組み

slick というスライドショーを実現するJavaScript ライブラリを使い、HTML 内の <li>に指定した背景画像をスライドさせる。

スライドショーは左に動くスライドと右に動くスライドの2 つを上下に並べて対比させる。

[使用するライブラリ]
* jQuery
* slick(https://kenwheeler.github.io/slick/

HTMLの書き方

  1. head終了タグ直前にslickのCSSと自作のCSSの2つを読み込みます。
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="css/6-1-9.css">
    </head>
  2. body内のスライドを表示させたい場所にHTMLを記載します。
    <div class="slider">
    <ul class="slider-top">
    <li class="slider-item slider-item01"></li>
    <li class="slider-item slider-item02"></li>
    <li class="slider-item slider-item03"></li>
    </ul>
    <ul class="slider-bottom" dir="rtl"><!--/スライダの表示方向を左⇒右に変更するためにdir="rtl"を追加-->
    <li class="slider-item slider-item04"></li>
    <li class="slider-item slider-item05"></li>
    <li class="slider-item slider-item06"></li>
    </ul>
    <!--/slider--></div>
  3. body 終了タグ直前に jQuery、slick、動きを制御する自作のJS の3 つを読み込みます。
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <!--自作のJS-->
    <script src="js/6-1-9.js"></script>
    </body>

自作のCSS内の書き方

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい(100vh)にする*/
}

.slider-top,
.slider-bottom {
    height: 50vh;/*スライダー上下の縦幅を画面の高さの半分(50vh)にする*/
}

/* 背景画像設定 */

.slider-item01 {
    background:url(../img/img_01.jpg);
}

.slider-item02 {
    background:url(../img/img_02.jpg);
}

.slider-item03 {
    background:url(../img/img_03.jpg);
}

.slider-item04 {
    background:url(../img/img_04.jpg);
}

.slider-item05 {
    background:url(../img/img_05.jpg);
}

.slider-item06 {
    background:url(../img/img_06.jpg);
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい(100%)にする*/
    height:50vh;/*各スライダーの縦幅を画面の高さの半分(50vh)にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

自作のJS内の書き方

//スライド上の設定
	$('.slider-top').slick({
		accessibility: false,// 左右矢印ボタンでの切り替えなし
		arrows: false,//左右矢印ボタン表示なし
		autoplay: true,//自動的に動き出すか。初期値はfalse。
		pauseOnHover: false,//オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
		pauseOnFocus: false,//フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
		slidesToShow: 1,//スライドを画面に1枚見せる
		slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
		swipe: false,//タッチスワイプに対応しない
	});
//スライド下の設定
	$('.slider-bottom').slick({
		accessibility: false,// 左右矢印ボタンでの切り替えなし
		arrows: false,//左右矢印ボタン表示なし
		autoplay: true,//自動的に動き出すか。初期値はfalse。
		pauseOnHover: false,//オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
		pauseOnFocus: false,//フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
		slidesToShow: 1,//スライドを画面に1枚見せる
		slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
		swipe: false,//タッチスワイプに対応しない
		rtl: true,//スライダの表示方向を左⇒右に変更する
	});

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top