ウェブ

フルスクリーントップ画像をズームしながら全画面で切り替えSwiper組み合わせハンバーガーメニュー付き

swiper_html

フルスクリーントップ画像を「ズームしながら画像を切り替える」Swiper導入と、「ハンバーガーメニュー」を同時にコピーペーストで実装できるように記事にしました。

HTMLのイメージ画像を差し替えるだけで使いまわせるのでとても便利かと思います。

参考例として「ハンバーガーメニュー」をまだ追加していない状態のコードをCodePenに記述しています。

▪Swiperズーム画像切り替えのみ参考例⇩ Run Penクリックで確認。

See the Pen グラデーション全画面ズーム画像差し替え by pull-design (@design90806871) on CodePen.

Swiper実装方法

CSSは<head></head>の中でJSは</body>の直前に記述します。

下記コードがCDNでSwiperのCSSとJSを読み込む記述になります。

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

HTML

<header>の中にハンバーガーメニューを記述し</header>以降にSwiperを記述します。

<!--ヘッダー↓-->
<header>
	<!-- spハンバーガーメニュー ↓ -->
  <div class="sp_nav">
    <div class="overlay" id="js_overlay"></div>
    <div class="hamburger" id="js_hamburger">
      <span class="hamburger_linetop"></span>
      <span class="hamburger_linecenter"></span>
      <span class="hamburger_linebottom"></span>
    </div>
    <div class="sidemenu">
      <nav>
        <ul>
          <li><a href="">News</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
          <li><a href="">Works</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
	<!-- spハンバーガーメニュー ↑ -->
</header>
<!--ヘッダー↑-->
<!-- Swiper -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-img" style="background-image: url('https://drive.google.com/uc?export=view&id=18VQRxpgFnhxJD-4_eLbecwplKBLouBXd');"></div>
    </div>
    <div class="swiper-slide">
      <div class="slide-img" style="background-image: url('https://drive.google.com/uc?export=view&id=1j4uqHDZyC33shZuOMgrmOm6eR8fps-mv');"></div>
    </div>
    <div class="swiper-slide">
      <div class="slide-img" style="background-image: url('https://drive.google.com/uc?export=view&id=1nN6SP3LFxeg-X185hag84S95RuE81XZC');"></div>
    </div>
  </div>
</div>
<!-- Swiper -->

CSS

スライドする画像を全画面にする為に、.slide-imgのクラスにweight:100%;height:100vh;にしています。

body {
  margin: 0;
  padding: 0;
}
a {text-decoration: none; color: #fff;}
li {list-style-type: none;}
/*------------------------------------
ヘッダー a hover:下線アンダーライン ↓
------------------------------------*/
header ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
header ul li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #4D1A06;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
header ul li a:hover {
  color: #4D1A06;
}
header ul li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
/*------------------------------------
ヘッダー pcハンバーガーメニュー ↓
------------------------------------*/
header {
  font-weight: 700;
}
header .pc_nav {
  margin: auto;
  width: 80%;
  padding-top: 40px;
}
header .pc_nav div .crumbs ul li {
  margin-right: 40px;
}
header .pc_nav div .crumbs ul li:last-of-type {
  margin-right: 0;
}
/*------------------------------------
ヘッダー spハンバーガーメニュー ↓
------------------------------------*/
header .sp_nav {
  text-align: center;
}
.sidemenu {
  height: 100vh;
  padding-top: 100px;
  position: fixed;
  right: -40%; /*メニュー幅*/
  transition: all 0.6s;
  top: 0;
  width: 40%; /*メニュー幅*/
  z-index: 4;
  background-color: #B39469;
}
.sidemenu nav ul li {
  padding: 20px;
}
.hamburger {
  cursor: pointer;
  height: 60px;
  position: absolute;
  right: 30px;
  top: 30px;
  width: 60px;
  z-index: 5;
}
.hamburger span {
  background-color: #fff;
  height: 4px;
  left: 15px;
  position: absolute;
  transition: all 0.6s;
  width: 30px;
}
.hamburger_linetop {
  top: 20px;
}
.hamburger_linecenter {
  top: 29px;
}
.hamburger_linebottom {
  top: 38px;
}
/*------------------------------------
メニュークリックした後 ↓
------------------------------------*/
.nav_open .sidemenu {
  right: 0;
}
.nav_open .hamburger_linetop {
  top: 26px;
  transform: rotate(45deg);
}
.nav_open .hamburger_linecenter {
  left: 50%;
  width: 0;
}
.nav_open .hamburger_linebottom {
  top: 26px;
  transform: rotate(-45deg);
}
.nav_open .overlay {
  opacity: 0.8;
  visibility: visible;
}
/*------------------------------------
メニュークリック後メニュー外の背景 ↓
------------------------------------*/
.overlay {
  background-color: #000;
  cursor: pointer;
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: all 0.6s;
  visibility: hidden;
  width: 100vw;
  z-index: 3;
}
/*------------------------------------
@media screen 1000px~999px ↓
------------------------------------*/
@media screen and (max-width: 1000px) {
  .sp_no {
    display: none;
  }
  .sidemenu {
    right: -50%; /*メニュー幅*/
    width: 50%; /*メニュー幅*/
  }
}
@media screen and (min-width: 999px) {
  .pc_no {
    display: none;
  }
}
/* グラデーション */
.swiper {
  position: relative;
}
.mySwiper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(233,187,176, 0), rgba(117,94,88, 1));
  mix-blend-mode: multiply;
  z-index: 2;
}
/* Swiper */
.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
  -webkit-animation: zoomUp 10s linear 0s;
  animation: zoomUp 10s linear 0s; /* 10秒かけて拡大 */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slide-img {
  background-size: cover; 
  background-position: center center;
  width: 100%;
  height: 100vh; /* 画像の高さ100vh */
}
/* Swiper-zoom */
@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}
@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

JavaScrip

<script src=”https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js”></script>の下に<script></script>で閉じて記述します。

<script>
  window.addEventListener('load', function(){
    let mySwiper = new Swiper(".mySwiper", {
      loop: true, // ループ指定
      effect: "fade", //フェード指定
      autoplay: {
        delay: 5000, //4秒後に次のスライドへ
        disableOnInteraction: false //スライドを止めない
      },
      speed: 3000, //3秒かけてフェードで切り替わる
      allowTouchMove: false,//マウスでのスワイプ禁止
    });
  });
</script>
<script>
  //ハンバーガーメニュー
  function toggleNav() {
    const body = document.body;
    const hamburger = document.getElementById("js_hamburger");
    const overlay = document.getElementById("js_overlay");
    hamburger.addEventListener("click", function () {
      body.classList.toggle("nav_open"); //クラスが含まれていれば削除、含まれていなければ追加する
    });
    overlay.addEventListener("click", function () {
      body.classList.remove("nav_open"); //クラスを削除する
    });
  }
  toggleNav();
</script>

上記のコードを使用することで、Swiperスライダーとハンバーガーメニューがウェブページで動作するようになります。スライダーの自動再生やフェード効果、ハンバーガーメニューの開閉などが実装されています。

Swiper スライダーの初期化

window.addEventListener(‘load’, function(){ … });ページの読み込みが完了した後に、指定された関数を実行するようにイベントリスナーを設定しています。
let mySwiper = new Swiper(“.mySwiper”, { … });クラス名が mySwiper と設定された要素に対して、Swiperスライダーを初期化しています。オプションとして、ループ再生、フェード効果、自動再生、スピード、タッチ操作の禁止などが指定されています。
Swiper

ハンバーガーメニューの実装

function toggleNav() { … }ハンバーガーメニューを制御するための関数を定義しています。
const body = document.body;: document.bodyページの 要素を表します。変数 body に 要素への参照を格納しています。
const hamburger = document.getElementById(“js_hamburger”);js_hamburger というIDを持つ要素を取得し、変数 hamburger に参照を格納しています。
const overlay = document.getElementById(“js_overlay”);js_overlay というIDを持つ要素を取得し、変数 overlay に参照を格納しています。
hamburger.addEventListener(“click”, function () { … });ハンバーガーメニューがクリックされたときに実行される関数を設定しています。関数内で、body 要素のクラスに nav_open クラスを追加または削除しています。
overlay.addEventListener(“click”, function () { … });オーバーレイがクリックされたときに実行される関数を設定しています。関数内で、body 要素から nav_open クラスを削除しています。
toggleNav();ページの読み込みが完了した後に toggleNav 関数を実行して、ハンバーガーメニューの機能を有効にしています。
ハンバーガーメニュー

Swiperズーム画像切り替えとハンバーガーメニュー実装例

See the Pen Swiper-ハンバーガーメニュー追加グラデーション全画面ズーム画像差し替え by pull-design (@design90806871) on CodePen.

※下にスクロールしてもついてくるようにする場合はハンバーガーメニューのクラス名.hamburgerposition: absolute;position: fixed;に変更することで、ハンバーガーメニューの場所が固定されます。

Swiperのパラメータについて

Swiperには多くのパラメータがあり、それを使ってスライダーを変化させたりカスタマイズすることが可能になっています。

詳しくは下記記事をご確認ください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール