デイトラweb制作上級編パターン3 DAY31~44①
nakano
卒業制作課題パターン3 1日目
今回からパターン③ カフェ『Open Cafe』のホームページを作成
ズームしながらフェードで切り替わるスライダー
HTML
<div class="swiper">
<div class="swiper-wrapper">
<!-- スライド1 -->
<div class="swiper-slide">
<div class="swiper-image pc-image">
<img src="./img/top/img_mainvisual1.png" alt="">
</div>
<div class="swiper-image sp-image">
<img src="./img/top/img_mainvisual1_sp.png" alt="">
</div>
</div>
<!-- スライド2 -->
<div class="swiper-slide">
<div class="swiper-image pc-image">
<img src="./img/top/img_mainvisual2.png" alt="">
</div>
<div class="swiper-image sp-image">
<img src="./img/top/img_mainvisual2_sp.png" alt="">
</div>
</div>
<!-- スライド3 -->
<div class="swiper-slide">
<div class="swiper-image pc-image">
<img src="./img/top/img_mainvisual3.png" alt="">
</div>
<div class="swiper-image sp-image">
<img src="./img/top/img_mainvisual3_sp.png" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>SCSS
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
.swiper-slide-active .swiper-image,
.swiper-slide-duplicate-active .swiper-image,
.swiper-slide-prev .swiper-image {
animation: zoomUp 12s linear 0s normal both;
}
.swiper-image {
width: 100%;
height: 735px;
position: relative;
@include mq('sp') {
height: 177.8667vw;
max-height: 800px;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
width: 100%;
height: 100%;
}
}JS（参考記事と全て同じ）
const topSwiper = new Swiper('.swiper', {
loop: true,
effect: "fade", // フェード切り替え
// 自動再生
autoplay: {
delay: 4000, // 4秒後に次のスライド
disableOnInteraction: false, // ユーザーが操作しても自動再生を継続
},
speed: 2000, // 2秒かけてフェード
// ページネーション
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});まとめ
今回からまた新しい卒業制作課題に取り組み始めました。
スライダーの仕様は特に指定はなかったのですが、見本のサイトがこのタイプのスライダーを使っていたので気になって調べてみました。
時間は使いましたが、苦手意識のあるスライダーの克服にまた近づけた気がします！
