CSS Playground

모든 코드는 Next.js기반으로 작성한다.사용버전 Next.js v14사용라이브러리 styled-components앞으로 작업을 진행할 공간 - https://github.com/Leeselbin/Animation-css-playground

일반적인 캐러셀 코드 보기

아래는 코드

핵심 코드를 살펴보자면전체코드

일단 마우스 드래그 이벤트를 구현하기 위해서는 해당 이미지에 직접 드래그를 하려 하면 이미지가 움직인다. 브라우저의 기본 클릭이벤트가 발생하면서 드래그 동작을 방해하기 때문에 이를 방지해야하는코드는 전체 코드

마우스 호버나 액티브시 조금더 다양한 효과를 줘도 좋을것같다.아래는 코드참고...

너무나 간단해서 설명할게 없다..아래는 코드