"스크롤"을 구현시 참고할만한 사이트 (Scroll, Animation)

1. 아, 예쁜 홈페이지 만들고 싶다.

오늘도 경제적 자유를 희망하는 사람으로서,

 

어떻게 해야 사람들에게 도움이 되는 제품을 만들 수 있을까 하다가,

제가 관심이 있는 "경제적 자유" 그 자체를 소개해주는 홈페이지를 만들어야겠다는 생각을 하게 됐습니다.

 

나름 벌써 홈페이지 로고까지 생각하고 있다.

 

홈페이지의 기능은 간단합니다.

 

IRP, ISA, 연금저축펀드에 대한 개념하고 어떤 ETF를 납입하면 좋을지를 간단히 소개해주는 기능,

미국 주식 배당주를 살 때 배당금 포함해서 재투자시 일정 기간 후에 얼마의 목돈이 생기는 지 확인해주는 기능,

배당금으로 내가 원하는 생활 수준이 달성되려면 얼마를 넣어야하는지 확인하는 기능 등..

 

이런 것들을 개발해보고 싶다는 생각이 들었습니다.

 

(다른 사람도 쓰면 좋은데, 그냥 내가 쓰고 싶어서 ㅎㅎ)

 

 

2. 당신은 웹페이지를 더 세련되게!

 

문제는 "예쁘게" 만들고 싶다는 것입니다.

 

그냥 허접하게 만들면 어떻게 하겠나요.

 

가장 처음으로 알아본 것은 "스크롤"입니다.

모바일 기준으로 사람들이 많이 보기 때문에 이제는 모바일 화면을 기준으로 웹 설계를 하려는데

 

어떻게 해야 멋있고 괜찮게 만들 수 있을까 싶었습니다.

 

그러다가 이런 사이트들을 발견했어요.

 

 

 

1. 스크롤하면 로고가 같이 작아지는 홈페이지 예시들

 

https://webflow.com/made-in-webflow/website/logo-and-page-animation-on-page-scroll

Logo and Navbar Animation on Page Scroll - Webflow

 

https://dribbble.com/tags/scrolling_logo

Scrolling Logo designs, themes, templates and downloadable graphic elements on Dribbble

 

https://www.youtube.com/watch?v=x-BVEhyYW50&ab_channel=TimothyRicks 

위의 예제 관련 유튜브 (webflow)

 

https://taylor.callsen.me/creating-a-shrinking-logo-animation-with-intersection-observers/

Creating a Shrinking Logo Animation with Intersection Observers - Taylor Callsen

 

 

 

2. 스크롤시 상단 메뉴바가 계속 붙어있게 하는 예시

 

https://webdesign.tutsplus.com/tutorials/create-an-animated-sticky-header-on-scroll-with-a-bit-of-javascript--cms-93428

Create an Animated Sticky Header on Scroll (With a Bit of JavaScript)

 

 

 

3. 부드러운 스크롤

 

https://lenis.studiofreight.com/

Lenis – Get smooth or die trying

https://github.com/studio-freight/lenis

GitHub - studio-freight/lenis: How smooth scroll should be

 

 

4. 홈페이지 헤드 부분을 스크롤 내릴 때 좀 더 보여주기

headroom.js

https://wicky.nillia.ms/headroom.js/

Headroom.js - Give your pages some headroom. Hide your header until you need it.

해당 라이브러리 데모:

https://codesandbox.io/s/scroll-snap-react-hooks-pppv8w?autoresize=1&hidenavigation=1 

scroll-snap-react-hooks - CodeSandbox

 

 

 

 

세상에는 멋진 예제들이 많다는 것을 깨달았고,

역시 데모 시연은 CodeSandBox가 최고라는 것도 알게 됐네요.