TIL 2022-01-25 Topdown slider, css text animation

스크롤시 전체 화면이 위아래로 움직이는 슬라이더가 멋있어 보여서 만들고 싶었다.

 

https://alvarotrigo.com/fullPage/ko/

fullPage scroll snapping. Create full screen pages fast and simple

위의 FullPage.js를 사용한 웹사이트처럼!

이를 정확히 뭐라해야하는지 애매한데, 나는 이것을 탑다운 슬라이더라고 부르기로 했다.

Vertical Carousel이라고도 부를수 있을거 같은데, 관련 내용이 잘 나오지 않아서...

 

이렇게 스크롤 업다운을 감지할떄 사용하는 것이 wheelevent다.

 

예전 문서를 보면 mousewheel 등의 이벤트를 사용하기도 했었는데,

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the 
compatibility table
 at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

현재로써는 deprecated되었고 wheelevent를 쓰는 것이 바람직하다.

 

wheelEvent는 말 그대로 마우스의 휠을 다루는 이벤트로 수평, 수직 스크롤 양을 deltaX,deltaY로 받아올 수 있다.

 

사실 처음 구현할떄는 scroll 이벤트로 할 수 있겠다 라는 생각을 했었는데,

이전 스크롤 값을 기억해서 비교하는 식의 스크롤 업다운 판별은 아무래도 wheelevent를 쓰는것보다 비효율적이다.

 

https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent

WheelEvent - Web APIs | MDN

 

 

한 화면만 보여줘야하다보니 부모 컨테이너의 overflow를 hidden하고,

휠에 따라서 자식 컨테이너의 translateY, 혹은 translate3d 통해서 y값을 조절하는 식으로 보여준다.

 

부모컨테이너와 자식 컨테이너를 따로 구분하는 이유는 overflow:hidden인 컨테이너의 y값을 조절하면 첫 화면을 제외한 나머지 화면들은 overflow:hidden에 의하여 짤려 흰 화면만 나오기 때문이다.

 

이외에도 overflow hidden인 상황에서는 스크롤 이벤트가 먹지 않는데, 이를 자식 컨테이너와 구분하는 방식으로 스크롤바를 숨기면서 스크롤이 가능하게 할 수 있다고 한다.

 

 

 

또한 중요한 것이 연속적으로 여러 휠이벤트가 트리거되어 한번에 여러번 넘어가지지 않는 것이다.

 

이것은 transitionend event를 통해서 해결할 수 있었다.

 

transitionend은 말 그대로 CSS Transition이 끝났을때 트리거되는 이벤트다. 이에 대한 것을 변수로 저장해 transition이 끝났을때만 휠이벤트가 트리거되도록 할 수 있었다.

 

React에서는 onTransitionEnd 속성으로 나타나있다.

 

TransitionEvent는 end를 제외하고

 

transition이 시작될떄의 start,

transition이 만들어졌을떄의 run,

transition이 취소되었을떄의 cancel이 있다.

https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent

TransitionEvent - Web APIs | MDN

 

 

 

 

 

이렇게 각각의 화면들을 보여주는 페이지를 만들고 있기에

공부할 겸  다양하고 예쁜 CSS 효과를 넣으면 좋겠다는 생각이 들었다.

오늘 공부한 것은 바로 svg를 그리는 애니메이션을 구현하는 것이었다.

 

SVG를 그리는 애니메이션은 svg의 stroke-dasharray와 stroke-dashoffset를 이용한다.

 

dasharray는 점선으로 만들어주는 속성으로, 값으로는 점선의 간격을 의미한다.

dashoffset은 점선이 되는 기준점을 조절하는 속성이다.

 

dasharray의 크기를 전체 path의 크기로 하면 점선이 생기지 않고, 그대로 모양이 유지가 된다.

 

또한 dasharray의 값을 조정하면 arc를 그릴수도 있다.

<svg class="a" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-dasharray=1300 stroke-width="20" />
    </svg>

 

여기에 offset을 통해서 아예 끝까지 줄여놓고, 애니메이션을 통해서 offset을 늘려가며 전체 path를 점차 보여주면, 이것이 마치 그려지는 효과를 주는 것이다.

 

이를 통해 figma를 통해 그린 싸인을 그리는 것과 같은 효과를 줄 수도 있다.

svg에서는 Text도 사용 가능하기에, 다양한 효과를 줄 수 있다.

 

 

내일은 다른 CSS 효과 두개를 추가하고, children 수에 따라서 자동으로 index등의 정하는 등 자잘한거 고치고 top down slider 마무리해야겠다.

 

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event

Element: mousewheel event - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/MouseScrollEvent

MouseScrollEvent - Web APIs | MDN