📝 노트로 돌아가기
이전글 2024.11.28 [웹 사이트 분석]
다음글 2024.12. [웹 사이트 분석]
메인화면
main nav
main nav에 hover를 하면 2차 메뉴가 나타남과 동시에 줄이 쭉 생기는 이벤트가 있다.
기본적으로 버튼에 hover를 하면 이벤트가 있음 *밑줄이나 버튼의 색이 바뀜
**참고용 코드
main event
메인화면의 텍스트 블럭들을 hover하면 색이 바뀐다.
배경이 있는 텍스트 블럭을 hover하면 flip 하면서 색이 바뀐다.
hover할때 블럭들이 움직이는 애니메이션이 약간 느려진다.
1rem == 16px
|
background color
|
nav menu font-size | main TT size |
| #FFFFFF | | font-size 1.13rem | font-weight 700 | letter-spacing .03em |
| font-size 3.38rem | font-weight 700 | letter-spacing .01em |
| used font | nav menu color | main TT color |
| - Freesentation - Noto Sans KR - akzidenz grotesk |
#002d7c #FF6700 #777777 |
#002d7c #007aFF #FF8714--#FF4200 #CD9D55--#AA6C39 |
**MacBook Pro 14 화면기준으로 작성되었습니다.
page__1
처음 페이지로 스크롤을 할때 텍스트와 이미지가 나오는 애니메이션이 있다.
page__2
타이틀 텍스트 옆에 아이콘이 바뀌며, 이미지쪽에 마우스를 올리면 확대해서 보여주는 기능이 따라다님.
page__3
page__4
page__5
slide처럼 이미지가 자동으로 넘겨지고 그에 따른 이미지장소 텍스트도 바뀜예) Lounge. ~ Lounge Cafe. Water ~ Space.
page__6
마지막 페이지에 도달하면 다음 페이지로 넘겨주는 ↓ 버튼이 올라가는버튼 ↑으로 바뀐다.
홈페이지가 일반적으로 스크롤을 하는 방식이 아닌 풀페이지 방식으로 구성되어있다.
기본적으로 텍스트가 바뀔때마다 애니메이션이 들어가있으며,
이미지가 로드 될때에도 애니메이션이 들어가있다.
예) 위에서 아래로 나타나는, 그려지듯 펼쳐지는 애니메이션
각 페이지마다 알맞는 아이콘이 바뀌어 보여준다.
페이지를 넘어갈때마다 부드럽게 넘어가지는 효과가 있다.
이미지에 마우스를 올리면, 이미지를 확대해주는 기능이 따라다니는 이벤트가 있다.
페이지를 넘기는 버튼↓이 마지막 페이지에 도달하면, 올라가는 버튼↑으로 바뀌게된다.
애니메이션이 꽤 많이 들어갔음에도 복잡하지않은 모습을 보여준다.
파란색과 주황색에서 활발한 회사의 느낌을 주어 굉장히 긍정적이고 활동적인 느낌을 주게한다.
두 색 사이의 조합도 아주 좋음 good!
|
background color
|
main TT size | TT size | txt size |
| #FFFFFF | | font-size 2.75rem | font-weight 700 | letter-spacing .01em |
| font-size 2.69rem | font-weight 700 | letter-spacing - |
| font-size 1.31rem | font-weight 500 | letter-spacing - |
| used font | main TT color | TT color | txt color |
| - akzidenz grotesk | #000000 #FFFFFF |
#000000 | #000000 |
**MacBook Pro 14 화면기준으로 작성되었습니다.
'📝 study > 웹 사이트 분석' 카테고리의 다른 글
| 2024.11.28 [웹 사이트 분석] (1) | 2024.11.28 |
|---|---|
| 2024.11.18 [웹 사이트 분석] 여행/호텔 (3) | 2024.11.18 |
| 2024.11.15 [웹 사이트 분석] 웹진/홍보 (4) | 2024.11.15 |
| 2024.11.14 [웹 사이트 분석] 식품/음료 (3) | 2024.11.14 |