Renewal Goal
뮤니쿤트라는 브랜드 정체성을 존중하고 강화하는데
중점을 두고,
다양한 이벤트를 통해 흥미를 느끼도록 하고자 함.
Style #깔끔한 #귀여운 #활동적인
Font - Family Pretendard - 한글 및 영어 기본 서체
Color
- #ebe6e1
- #f4831f
- #fece00
- #1EA0FF
Main
Point
Sub
Point
Point 컬러는 뮤니쿤트 브랜드의 정체성을 더욱 강화하는
핵심적인 컬러입니다.
장식 요소와 가로 스크롤 영역에서 색상을
활용하여 뮤니쿤트 브랜드를 빛내고자 함
강아지 사진 사용시 귀엽고 활동적인 반려견의 사진을 활용하여 다양한 강아지종을 보여줌
publishing
GSAP ScrollTrigger를 활용한 스크롤시 글자 이벤트 구현
Sticky를 활용한 모바일 화면 변화
GSAP Timeline을 활용한 글자 이벤트
SVG를 활용한 그리는 듯한 장식 요소 이벤트
스크롤시 가로로 넘어가는 페이지가 보이는 효과 구현
옆에 컨텐츠에 마우스 커서를 올려주세요
Problem Solution
1. 이미지 확대 세션에서 영역에 들어가면 스크롤시 점점 이미지 확대가 되어야 하는데 동작이 안됨
위에 글씨 이벤트 부분이 영역을 넘치는 현상이 발생하여 위에 글씨 이벤트 세션에 end 부분을 고정값을 주어 해결함
gsap.to(".text-wrapper", { ease: "ease-in",
scrollTrigger: { trigger: ".text-wrapper",
pin: true, end: "+=2500", scrub: 1,
},
scale: 0.8, opacity: 0, });
2. 스크롤시 글자색이 변하는 이벤트시 너무 빠르게 진행되어 이벤트의 재미가 없음
감싸는 section의 값을 크게 주어 이벤트가 잘보이도록 해결함
.mobile-app {
display: grid; grid-template-columns: 1fr 1fr;
height: 1010vh;}
3. 글자색이 변하는 이벤트 코드 작성시 만 주어 자바스크립트에서 on을 하면 색상이 바뀌는 코드로 하려고 했으나 실패함
감싸는 div를 쓰고 그 안에 span으로 처리를 하여 div영역이 width:0이였다가 스크롤시 width:100%으로 처리하여 해결함
gsap.set(".mobile-app-text1 .word", { width: 0 });
.to(".mobile-app-text1 .word", {
width: "100%", duration: 1, ease: "none", stagger: 5,
});
4. 강아지가 움직이는 모션이 들어간 세션에서 가로 스크롤이 생기는 문제가 발생함
이미지 자체에 overflow:hidden을 주어도 해결이 안되어 body에 값을 주니 해결됨
body {
background-color: #ebe6e1;
font-family: "pretendard"
overflow-x: hidden;
}
5. 움직이는 강아지 GIF 파일 저장시 흰색 테두리가 나오며 흰색 테두리가 없으면 사진이 깨짐 또한 움직이는 이벤트가 잘보임
배경색을 백그라운드 컬러와 동일한 색상으로 하여 GIF 파일을 저장하였으며 발바닥쪽이 아닌 몸쪽에 애니메이션 효과를 줌
6. ScrollTrigger가 창의 크기 조절시 내용들이 안보이는 현상이 발생
스크립트를 통해 resize시 다시 로딩이 되도록 구현함
lastWidth = window.innerWidth;
$(window).resize(function () {
if (window.innerWidth != lastWidth) {
location.reload();
scrollTrigger.refresh();
}
lastWidth = window.innerWidth;
});
Review
평소에 강아지를 좋아해서 강아지 관련 페이지를 만들어서 뜻깊은 시간이였고 저희 강아지 사진도 같이 넣어서 프로젝트를 만들 당시 행복하고 즐겁게 만들었던 것 같습니다.
처음엔 팀 프로젝트만 해본 저에게 개인 프로젝트란 과업이 주어졌을때 어떻게 디자인을 해야할지 좀 더 다양한 효과를 보여줄 방법이 무엇일까 막막했습니다. 뭐든 처음이 어렵다는 마인드로 일단 해보자! 다짐하고 사이트를 만들었는데 GSAP를 활용한 Scroll 이벤트를 많이 사용하여서 end 값으로 틀이 틀어지고 애니메이션도 자연스럽지 않고 디자인적으로도 이상한 것 같아 좌절을 하였습니다. 하지만 여러 강의들과 인터넷 서취를 하면서 처음 접하는 코딩들과 좀 더 귀여운 디자인들을 공부를 하여 프로젝트를 만들어갔습니다.
다음 프로젝트는 더 향상된 실력으로 한 계단 올라간 저 자신이 되어있을거라는 믿음으로 이 프로젝트를 마무리 하겠습니다.