Vanilla Javascript Effect 무작정 따라하기 #2 스크롤에 따른 전환

 

Vanilla Javascript Effect 무작정 따라하기 #1 typing effect

 

저번주에는 글자가 타자 치듯이 화면에 출력되어 나오는 typing effect와

 

텍스트(단어)가 바뀔때마다 해당하는 이미지로 바뀌는 기능을 만들어보았다.

 

오늘은 스크롤을 할 때 페이지에 해당하는 이미지가 나타났다가 다음 페이지가 되면 사라지는 것을 구현했다.

 

우선 결과물을 먼저 보자.

 

 

  

사용자로 하여금 웹에서 재미와 아름다움을 느끼게하는 interaction 중

 

요즘 가장 HOT한 것은 scroll에 따라 화면이 변화되는 혹은 동영상이 재생되는 것이라고 본인은 생각한다.

(특히 apple이 scroll에 따른 화면변화를 잘 표현해놓았다. 아아.. 언제쯤 거기까지 닿을 수 있을 것인가!!!)

 

오늘 내가 만든것은 apple에 비할수는없지만 scroll에 따라 사용자가 뭔가를 볼 수 있게한다는 점에서 의미가 있다.

 

평일에는 온종일 코드스테이츠와 함께하느라 기능 구현하는 것을 생각도 못했다.(이것은 변명이 될 수 있을것인가.)

 

주말에라도 이렇게 조금씩 만들 수 있음에 소소한 기쁨을 느낀다. 

 

오늘 무엇을 만들지 고민하는 시간이 생각보다 길었다.

 

시간절약을 위해 평일 중 주말에 만들고싶은 것을 조금씩 적어 놓아야겠다.

 

 

 

 

scroll을 통한 interaction은 종류가 무궁무진하다!

 

특히 scroll과 canvas를 통해 더 화려한 무언가를 만들 수 있다고 한다. 

 

그럼 다음주에는 canvas와 vanilla javascript로 무언가를 해볼까?