Renewal Goal
아크라는 게임에 호기심을 유발시키고
게임 홍보
관리의 편리성과 유지보수의 효율성을 위한
모바일 및 태블릿, PC 반응형
홈페이지 구현을 하고자 함.
Style #역동적인 #화려한 #귀여운
Font - Family
Pretendard - 한글 기본 서체
Neue Haas Grotesk Display Pro
- 영어 기본 서체
Color
- #76A2D1
- #E1F41D
- #F05934
- #3341BC
Main
Point
Sub
Point
게임에 나오는 다양한 캐릭터들과 요소들을 다양한
디자인으로 접목시켜
게임에 대해 시각적으로 재미있게 소개하고 흥미를
일으키게 함.
publishing
Break Point
PC : 1920px, Tablet : 960px, Mobile : 430px
Point
각 세션 이동시 왼쪽 nav 폰트의 색상 변화
랜덤 이미지 hover시 멈추는 이벤트
0에서 부터 늘어나는 숫자 및 영역 이벤트
캐릭터 선택시 캐릭터의 설명이 나오는 세션
카드세션에서 다음 버튼을 클릭시 카드가 날아가는 이벤트
옆에 컨텐츠에 마우스 커서를 올려주세요
Problem Solution
1. 구름이 흘러가는 느낌이여야 하는데 중간에 가다가 멈추는 현상들이 발생
img에 style 값을 주고 CSS에서 애니메이션 구현시 calc()를 사용하여 자연스럽게 흘러가도록 해결함
intro-wrapper .cloud{
animation: cld calc(15s * var(--i)) linear
infinite;
max-width: 100%;
2. 스크롤시 글자를 덮고 있는 path 영역이 다른데 다 같은 너비로 이벤트가 발생
scrollTrigger를 사용하여 문장마다 다른 너비값을 주어 해결함
.to(".text-container .text-wrapper1", {
width: "30vw", duration: 1, ease:
"none",
stagger: 5, backgroundColor: "#000", });}
3. 앞서 2번에 있는 세션에서 반응형 구현시 이미지와 글씨를 같이 쓰니 넘치는 현상 발생
태블릿 버전에서는 이미지가 작아지지만 모바일 버전에서는 이미지 opacity:0으로 하여 안보이게 함.
4. 숫자 이벤트 세션에 스크롤시 계속 숫자가 바뀌는 현상이 발생
started라는 명령어를 만들어 그 세션에 도착했을때 한번만 실행되도록 구현함
window.onscroll = function () {
if (window.scrollY >= section.offsetTop) {
if (!started) {
nums.forEach((num) => startCount(num));
}
started = true; } };
5. 중구난방한 배치로 인해 디자인이 애매함
배경색을 백그라운드 컬러와 동일한 색상으로 하여 GIF 파일을 저장하였으며 발바닥쪽이 아닌 몸쪽에 애니메이션 효과를 줌
6. 카드 이벤트 세션에서 다음 버튼을 눌렀을때 카드가 다 날라가서 아예 안보이는 현상이 발생 및 이전 버튼시도 같은 이벤트가 실행됨
카드를 여러장 배치하여 한장만 날라가도록 구현 및 prev와 next class를 따로 만들어 이벤트를 따로 구현
.weapon-kok-img.prev .stone1 {
opacity: 0;
}
.weapon-kok-img.next .stone1 {
left: 200%;
top: 0%;
transition: 0.7s;
}
7. boss 세션에서 넘어가는 버튼 클릭시 끊기는 느낌으로 넘어감
smooth라는 smoothScrollLeft라는 함수를 통해 부드럽게 넘어가도록 함
nextBtn.addEventListener("click", () => {
smoothScrollLeft(scrollContainer, 500);
});
backBtn.addEventListener("click", () => {
smoothScrollLeft(scrollContainer, -500);
});
8. review 영역에 text-decoration이 있으니 답답해 보임
text-decoration:none으로 밑줄을 없앰
9. 반응형 구현시 문장들이 이상하게 떨어짐
width:%를 주어 문장들의 너비값을 주어 문장의 길이가 정갈하도록 해결함
Review
아크라는 게임을 요즘 즐겨하고 있기도 하고 스팀에서는 간략한
소개로만 되어있어 아쉬움 나머지 시작하게 된 프로젝트였습니다.
디자인시 어떤 캐릭터를 넣어야할까 정말 많은 고심을 하면서
만들었는데 최대한 처음 접하시는 분들께는 귀여운 이미지의
캐릭터들이 좋겠다 생각을 하였고 첫번째 프로젝트와는 다른 디자인을
하기위해서 좀더 튀는 색상을 사용하였고 좀 더 꽉차게 만들었던 것
같습니다.
또한 퍼블리싱시 첫번째 프로젝트에서는 스크롤 이벤트를 많이
사용하였지만 이번 프로젝트에서는 스크롤 이벤트보다는 click 이벤트
및 애니메이션 효과들을 많이 넣었던 것 같습니다. 그러나
반응형이라는 큰 산이 있어 모바일 및 태블릿, PC 화면 모두
충족하려고 하니 더 오랜 시간이 걸렸습니다. 관리의 편리성과
유지보수의 효율성을 위해 모바일과 태블릿, PC 버전으로 만들게
되었는데 중간에 포기할까 고민도 많이 했지만 그래도 끝까지 해내는
과정에서 괴로웠지만 한편으로는 해냈다는 생각으로 기쁨을 얻었던 것
같습니다.