[Vue.js/개발일지] 2. 메인 페이지 swiper 제작
메인 페이지에 뭘 만들어야할까 다양한 레퍼런스들을 찾아보다가 그냥 깔끔 무난한 스타일로 swiper하나를 제작 해보기로 맘먹었다.
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
대규모 프로젝트들에서도 많이 사용하고 현업에서 진짜 많이 사용하는 슬라이더이다.
DJI - 공식 웹사이트
DJI 기술로 새로운 가능성의 미래를 엿볼 수 있습니다. DJI Air 2S, DJI FPV, 매빅, 팬텀과 같은 소비자 드론에 대해 자세히 알아보세요. 핸드헬드 제품인 DJI OM 4, DJI Pocket 2로 더 매끄러운 영상과 사진
www.dji.com
DJI같은 곳에서도 잘 사용하고 있고, 최대한 모던한 스타일로 몇년 지나도 안구려보이도록 심플하게 (엄청 어렵지만) 만들 생각이였다.
하지만 Vue에서 swiper.js를 어떻게 사용해야 할지 몰라 난항을 겪었지만, 쉽게 사용할 수 있도록 데모버전을 보여주고 있었다. swiper demo 사이트를 통해서 일반 에크마 스크립트부터 리액트, 뷰, 앵귤러, 스벨트까지 데모 코드를 보여주고 있었다 덕분에 편하게 제작 가능 했다.
Swiper Demos
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
이 다음 고민으로는 내가 포토샵을 맛깔나게 해서 swiper에 사진을 넣어야 할지, 아니면 gsap같은 애니메이션을 따로 넣어서 개발해줘야 할지 고민을 했지만, 스와이퍼 내에서 글씨 애니메이션도 사용 할 수 있는 방안이 있어서 Parallax를 이용하여 글씨 날리기 까지 개발 했다.
//Swiper.VUE 스크립트 부분
import { Navigation, Pagination, Scrollbar, EffectFade, Autoplay, Parallax } from 'swiper';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/effect-fade';
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, EffectFade, Autoplay, Parallax],
};
},
methods: {
}
};
부트스트랩 container 속성을 이용하여 옆에 마진을 주고 그 안에서 글씨를 볼 수 있도록 만들었다. 그리고 최대한 웹과 대응을 위하여 media-query 속성을 활용하여 웹에서도 깨지지않고 볼 수 있도록 개발 하였다.
<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Comforter&family=Noto+Sans+KR:wght@700&family=Roboto:wght@700&display=swap');
.wrap-swiper{
position: relative;
font-family: 'Roboto','Noto Sans KR', sans-serif;
img{
filter: brightness(40%);
z-index: 2;
width: 1320px;
}
.title{
font-size: 45px;
position: absolute;
z-index: 1;
top: 30%;
left: 10%;
color:white;
.subtitle{
font-size: 30px;
position: absolute;
color:white;
}
}
@media (max-width: 1000px) {
.title{
font-size: 25px;
position: absolute;
z-index: 1;
color:white;
left: 15%;
.subtitle{
font-size: 20px;
position: absolute;
color:white;
}
}
img{
width: 800px;
}
}
}
</style>sass로 개발하였으며 1000픽셀 미만의 화면과 그 이상의 화면을 분리해놓은 모습이다. 폰트는 구글 폰트들을 사용하였다.
깔끔하게 넘어가는 방식을 사용하기 위해 vue swiper.js안에 있는 data-swiper-parallax를 통해 글씨는 옆으로 슬라이드되고 swiper는 fade effect로 주었다.
<swiper
:style="{
'--swiper-navigation-color': '#fff',
'--swiper-pagination-color': '#fff',
}"
:autoplay="{
delay: 5000,
disableOnInteraction: false,
}"
:modules="modules"
effect="fade"
:slides-per-view="1"
:speed="1200"
navigation
:parallax="true"
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange">
<swiper-slide class="wrap-swiper">클릭, 스크롤로 넘어가는거 제어 다 가능하고, 오토플레이 설정도 다 가능하다. script부분에서 import 되어야 사용가능한 기능들이다.
//HomeSwiper.vue
<template>
<div class="container-md">
<swiper
:style="{
'--swiper-navigation-color': '#fff',
'--swiper-pagination-color': '#fff',
}"
:autoplay="{
delay: 5000,
disableOnInteraction: false,
}"
:modules="modules"
effect="fade"
:slides-per-view="1"
:speed="1200"
navigation
:parallax="true"
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange">
<swiper-slide class="wrap-swiper">
<div
class="title"
data-swiper-parallax="-200">
Becoming One in Love<br />
Growing Leaders<br />
Helping People to Serve God<br /><br />
<div
class="subtitle">
We Are OICA
</div>
</div>
<img
src="../assets/swiper/swiper1.png"
alt=""
class="swiper-img" />
</swiper-slide>
<swiper-slide class="wrap-swiper">
<div
class="title"
data-swiper-parallax="-200">
사랑으로 하나되는 학교 <br />
리더를 세워가는 학교 <br />
섬김으로 봉사하는 학교 <br /><br />
<div
class="subtitle">
우리는 OICA입니다
</div>
</div>
<img
src="../assets/swiper/swiper2.png"
alt=""
class="swiper-img" />
</swiper-slide>
<swiper-slide class="wrap-swiper">
<div
class="title"
data-swiper-parallax="-200">
Growing Global Leaders<br />
in God's Words. <br /><br />
<div
class="subtitle">
We Are OICA
</div>
</div>
<img
src="../assets/swiper/swiper3.png"
alt=""
class="swiper-img" />
</swiper-slide>
<swiper-slide class="wrap-swiper">
<div
class="title"
data-swiper-parallax="-200">
하나님 말씀 안에서<br />
글로벌 리더 양성<br /><br />
<div
class="subtitle">
우린 OICA입니다
</div>
</div>
<img
src="../assets/swiper/swiper4.png"
alt=""
class="swiper-img" />
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { Navigation, Pagination, Scrollbar, EffectFade, Autoplay, Parallax } from 'swiper';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/effect-fade';
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, EffectFade, Autoplay, Parallax],
};
},
methods: {
}
};
</script>
<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Comforter&family=Noto+Sans+KR:wght@700&family=Roboto:wght@700&display=swap');
.wrap-swiper{
position: relative;
font-family: 'Roboto','Noto Sans KR', sans-serif;
img{
filter: brightness(40%);
z-index: 2;
width: 1320px;
}
.title{
font-size: 45px;
position: absolute;
z-index: 1;
top: 30%;
left: 10%;
color:white;
.subtitle{
font-size: 30px;
position: absolute;
color:white;
}
}
@media (max-width: 1000px) {
.title{
font-size: 25px;
position: absolute;
z-index: 1;
color:white;
left: 15%;
.subtitle{
font-size: 20px;
position: absolute;
color:white;
}
}
img{
width: 800px;
}
}
}
</style>작업물은 이곳에서 볼 수 있다.
swiper 제작도 참 오래 걸렸다. 괜히 뷰로 제작했다라는 생각을 수십번은 한 거 같다. 일반 JS로 개발 했으면 더 편했을거란 생각도 한다. 하지만 지금 개발하고 있는 라우팅 뷰나 나중에 사용할 vuex같은 것들을 생각 해 본다면 지금 이렇게 들이박기식 공부법도 도움이 되지 않을까 생각한다. 다음은 footer 제작을 해야겠다.