Parallax? 그게 뭔데
Supabase에 대한 간단한 정보와 사용후기를 기록합니다.
최근 Parallax website가 관심이 많다. 꾸미기에 따라서 정말 사용자에게 좋은 경험을 가능하게 하기 떄문이다. (그냥 이쁘고 멋지기도 하다.) 이것 말고도 three.js등 관심은 많지만 아직 신출내기 개발자 지망생은 하늘의 별따기다. 그래도 Parallax정도는 꼭 프로젝트에 한번쯤 구현해보고 싶어서 이렇게 정리글을 쓰게 되었다.
Parallax는 먼저 시차라는 뜻이다. Parallax scrolling effect(시차 스크롤 효과)는 즉,웹사이트의 배경이 전경보다 느린 속도로 스크롤 되는 기술이다.
사용방법에 대해서
얼마전에 들었던 강의에서는 마우스이벤트나 키보드등에 따라서 여러 애니메이션에 관한 강의가 있었는데, 그 중에 Parallax에 대한 부분도 있었다. 그래서 꼭 이번 프로젝트에 써보자! 라는 생각으로 정보를 찾던중, 리액트에서는 대체 어떻게 만들어야 하는거지..?? 라는 생각이 스쳐지나갔다.
먼저 방법을 설명하자면, 내가 찾아본 가장 좋은 방법은 라이브러리를 이용하는 방법이다.
특히 애니메이션에 특화된 라이브러리가 많은데, 그중 react spring이라는 라이브러리에서 Parallax를 지원한다고 한다.
이런식으로 컨테이너 형식으로 쓰이는것같다.
그 외에는 react-Parallax가 있는데,
사용법 자체는 위의 react spring과 크게 다를건 없어보인다.
‘생활코딩’이라는 유튜버가 올려놓은 강의가 있으니 참고해야겠다.
