ウェブ

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

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ズーム画像切り替えとハンバーガーメニュー実装例

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

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

Swiperのパラメータについて

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

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

swiper
Swiperでスライドを簡単に実装する方法(スワイパー)【jQuery不要】スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能。...

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA