Wandergates 웹디자인 레퍼런스
Image follow mouse
Scroll animation
https://www.wandergates.com/

scroll animation by gsap

video bg, cursor follow mouse, scroll animation

?

Scroll Animation
Fullpage Navigation
Page transition

Scroll Animation
Image hover effect
Fullpage Navigation

왼쪽 라인 레이아웃

cursor follow mouse
scroll animation
Home 하고 About us 부분 튜토리얼 만들어 볼것!

색감 / section divider /
일본풍

사이트 목적에 딱 맞는 디자인과 색감

텍스트 세로 배열
css : writing-mode: vertical-lr;

색감 / 원페이지 레이아웃 메뉴바
캘리그라피 배경 사용

요즘 디자인 트렌드 = 스크롤 애니메이션
서브페이지 헤더부분 풀페이지 레이아웃

[웹디자인 참고]

전체적인 컬러 참고
메인 컨텐츠 스크롤시 고정된 이미지가 컨텐츠별로 변경

https://triniti.eu/

[웹디자인 참고]

메인이미지 스크롤다운시에 이미지 변형 / 커서가 컨텐츠마다 변경(해당컨텐츠로 이동 유도)
메인 중간아래(dining 부분) 내용이 긴부분만 스크롤 됨 / 메인 중간아래(memorable부분) 아코디언부분 옆에 이미지도 변경

https://www.casangelina.com/

[웹디자인 참고]
메인 이미지 컬러 변환 참고, 전체적인 레이아웃
https://mmsny.org/

[웹디자인 참고]

메인 슬라이드 이미지 변환 참고, 오른쪽 닷네비게이션 디자인
메인페이지  심플한 컨텐츠 정렬, 배너 롤오버시 커서 변환
서브페이지 참고
http://celliverylh.com/

https://www.mobis.co.kr/kr/index.do

[웹디자인 레퍼런스]

전체적으로 원을 이용한 디자인 / 색감
Mouse following Pointer – 리뉴얼시 참고 / Selected Work 의 마우스 호버 효과

https://www.centili.com/

https://skylinesolutions.ca

https://www.helidecks.org/

[웹디자인 참고]

흐르는 텍스트 사이의 이미지 효과
Block Reveal Image
깔끔한 인포그래픽 디자인/애니메이션 – https://tokyugardencity.com/facts/
슬라이딩 메뉴 / 메뉴 호버 효과

[웹디자인 레퍼런스]

마우스 따라다니는 커서 – Following the mouse pointer, cursor
스크롤 애니메이션 -Block Reveal Images Effect
단계별 컨택트폼 – Step by step contact form
포트폴리오 레이아웃
Vertical Text design / Sliding menu / 색감