✔ 아이콘 폰트를 이용한 아이콘 넣기
✔ fullpage
✔ keyframe활용한 여러가지 모션
✔ 반응형 작업
✔ gsap 마우스 커스텀
키워드랩은 아이콘을 아이콘폰트를 사용하여 만들었다 처음 접해보는 거라 한번 찾아보았다
🔍아이콘 폰트란?
백터 그래픽 형태로 되어있어 폰트처럼 CSS로 속성을 변경할 수 있는 아이콘
📌사용장점
✅ 하나의 글꼴에 다양한 아이콘을 넣어 두고 이를 호출에 사용
✅ 벡터 그래픽을 이용하기에 모든 아이콘이 어떠한 크기로도 변경 가능
✅ CSS로 가능한 어떠한 작업도 가능💻사용방법
사용방법은 웹폰트 사용법이랑 동일하다
.sc-history .col-left .m-tab i::before{ content: "\e936"; font-family: xeicon }
스크롤 할 때 화면에 딱! 맞춰서 보여주도록 해주는 fullpage😎
fullpage는 기본적인 기능 외에 여러 가지 기능들을 제공해 준다
✅ navigation
네비게이션을 제공하여 섹션 이동할 수 있도록 도와주고 어느 위치에 있는지 확인도 가능하다
✅ afterLoad
콜백 기능으로 효과를 넣을 수도 있다
키워드랩 같은 경우에는 처음 한 번만! 섹션에 도달하면 효과를 준다 이러한 효과를 주기 위해 콜백 기능 중 하나인 afterLoad
를 사용하였다
afterLoad: function(origin, destination, direction){
if(destination.index === 1 && Selectio1nFlag == true){
$('.sc-onlinemarketer').addClass('show')
Selectio1nFlag = false;
}else if(destination.index === 2 && Selectio2nFlag == true){
$('.sc-services').addClass('show')
Selectio1nFlag = false;
}else if(destination.index === 3 && Selectio3nFlag == true){
$('.sc-history').addClass('show')
Selectio1nFlag = false;
}else if(destination.index === 4 && Selectio4nFlag == true){
$('.sc-advertiser').addClass('show')
Selectio1nFlag = false;
}else if(destination.index === 5 && Selectio5nFlag == true){
$('.sc-news').addClass('show')
Selectio1nFlag = false;
}else if(destination.index === 6 && Selectio6nFlag == true){
$('.sc-visual2').addClass('show')
Selectio1nFlag = false;
}
❗아! fullpage를 사용하게 되면 scrollTo()메소드가 사용이 안 되었다 그래서 이것 또한 afterLoad
를 사용하여 인덱스 값 비교로 적용할 수 있었다
if (destination.index == 1) {
$('.btn-bottom-wrap').addClass('on');
} else if (destination.index > 0) {
// 여기에 destination.index가 0보다 클 경우 실행하고자 하는 코드를 추가한다
} else {
$('.btn-bottom-wrap').removeClass('on');
}
✅ responsiveWidth:(화면크기)
키워드랩은 작은 모바일이나 태블릿 같은 경우에는 풀페이지를 사용하지 않았다 이것 또한 찾아보니 fullpage옵션 중 하나인데 responsiveWidth: 1279(화면크기)
요 옵션을 사용하여 1279부터 적용이 되도록 하였다
keyframe을 활용해서 여러 가지 효과를 넣어봤는데 이 효과는 translate3d
을 사용하였다
translate3d는 뭘까?
쉽게 말해 x축과 y축 그리고 z축의 값을 이용하여 3차원 방식으로 이동처리해버리는 것이다
📁 위로가는 모션
@keyframes count-up {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -90%, 0);
}
}
📁 아래로가는 모션
@keyframes count-down {
0% {
transform: translate3d(0, -90%, 0);
}
100% {
transform: translate3d(0, -0, 0);
}
}
📕 CSS에는 forwards
속성을 줘서 마지막 상태를 유지하도록 하였다
.sc-onlinemarketer.active .number .down{
animation: count-down 3s forwards;
}
이번 PC→ 모바일로 바꾸는 과정에서 정말 많은 걸 깨달았다.. 막히는 부분들을 찾아가면서 스킬 향상에 도움이 많이 되었다🥲
<div class="history-tab">
<a href="" class="m-tab">
<span id="output">2023</span>
<i class="xi-caret-down-min arrow"></i>
</a>
<div class="btn-wrap">
<button data-tabslide="#slide1" class="on" value="2023">2023</button>
<button data-tabslide="#slide2" value="2022">2022</button>
<button data-tabslide="#slide3" value="2021">2021</button>
<button data-tabslide="#slide4" value="2020">2020</button>
<button data-tabslide="#slide5" value="2019">2019</button>
</div>
</div>
하나의 마크업으로 모바일+PC까지 해결하려고 하니 문제가 생겼다
악! PC화 면에서도 접히는 현상이 생겨버렸다..
하지만 모든 일에는 해결 방법이 있다😎
if($(window).width() < 767) {
$('.btn-wrap').slideUp()
}
화면 크기에 따른 적용 방법으로 모바일에서만! 접히도록 하였다
✅breakpoints
로 화면 비율에 따라 값 다르게 주기!
Swiper도 반응형으로 바꾸려니 문제가 생겼다 PC에서는 4개 태블릿에서는 3개 모바일에서는 2개가 보이도록 해야 하는 상황이었다
그래서 또 폭풍 검색을 통해 Swiper에 breakpoints
을 사용하면 화면 비율에 따라 값을 다르게 넣을 수 있다는 것을 찾았다
const swiper6 = new Swiper('.news-slide', {
slidesPerView:2,
spaceBetween:22,
breakpoints: {
768: {
slidesPerView: 3, //브라우저가 768보다 클 때
spaceBetween: 40,
},
1280: {
slidesPerView: 4, //브라우저가 1024보다 클 때
spaceBetween: 50,
},
},
});
📁 기본으로 2개가 보이게 하고 화면크기에 따라 보이는 개수를 다르게 하여 반응형 작업을 하였다
📁 GSAP은 정말 다양한 기능들이 있는 거 같다 이번에 사용한 건 GSAP을 이용하여 마우스를 바꿔보았다
const customCursor = document.querySelector(".mouse");
gsap.set('.mouse',{scale: 0})
document.addEventListener("mousemove", (e) => {
gsap.to(customCursor, {
x: e.clientX,
y: e.clientY,
});
});