フルスクリーントップ画像を「ズームしながら画像を切り替える」Swiper導入と、「ハンバーガーメニュー」を同時にコピーペーストで実装できるように記事にしました。
HTMLのイメージ画像を差し替えるだけで使いまわせるのでとても便利かと思います。
参考例として「ハンバーガーメニュー」をまだ追加していない状態のコードをCodePenに記述しています。
▪Swiperズーム画像切り替えのみ参考例⇩ Run Penクリックで確認。
See the Pen グラデーション全画面ズーム画像差し替え by pull-design (@design90806871) on CodePen.
ADVERTISEMENT
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スライダーを初期化しています。オプションとして、ループ再生、フェード効果、自動再生、スピード、タッチ操作の禁止などが指定されています。 |
ハンバーガーメニューの実装
| 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.
※下にスクロールしてもついてくるようにする場合はハンバーガーメニューのクラス名.hamburgerのposition: absolute;をposition: fixed;に変更することで、ハンバーガーメニューの場所が固定されます。
Swiperのパラメータについて
Swiperには多くのパラメータがあり、それを使ってスライダーを変化させたりカスタマイズすることが可能になっています。
詳しくは下記記事をご確認ください。
Swiperでスライドを簡単に実装する方法（スワイパー）【jQuery不要】スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能。...
ADVERTISEMENT
![【原神】刻晴超開花パーティ 夜蘭蒸発パーティ 深境螺旋12層攻略 Genshin Impact [4K] (げんしん)](https://design-pull.com/wp-content/uploads/2022/12/gensinabyssal_spiral12_20221126-320x180.jpg)
