이 모션은 어떻게 스크립트를 짜야 하는걸까요..

Question

현재 개인 사이트 구축 중인데, 아래와 같은 모션을 구현하려 합니다.react 기반으로 작업 중이라 관련 라이브러리 등을 찾아보고 있는데 비슷한게 없네요.커스텀하거나 직접 스크립트를 짜려고 해도 방향조차 잡히지 않아 시작도 못하고 있습니다 ㅜ관련 라이브러리를 아시는 분이나 , 어떻게 스크립트를 짜면 좋을지 조언 구합니다ㅜ동영상 첨부가 안돼서 아래 test 링크 걸어두었습니다.test

열일하는 네오 · Answer

circular slider로 검색해보세요 https://www.cssscript.com/automatic-circular-slider-vanilla-javascript/

MungGaeDev · Answer

https://designshack.net/articles/css/code-a-spinning-circular-menu-with-css/비슷한 예시인것 같습니다.

chief · Answer

우측은 기본적으로는리볼버 탄창 돌아가듯이 각 약실을 옮기는 게 아니라 그 부모(6발이 담겨있는 것)를 2d rotate 돌린다고 생각되네요. 적절한 타이밍(easing) 과 투명도 같은 효과를 효과를 넣어서 더 극적이게 보이게 한 것 같아요. 좌측은 그냥 세로방향 카드슬라이드를 텍스트로 한 것과 비슷하다 생각하시면 될 것 같습니다

이 모션은 어떻게 스크립트를 짜야 하는걸까요..

3개의 답변

Q&A 목록