SLIDE2 [React/Next.js] 라이브러리 없이 구현하는 자동 재생 슬라이드 라이브러리를 사용하지 않고 무한 자동 재생 슬라이드 구현 포트폴리오에서 만든 광택 효과가 적용된 기술 스택 카드가 생각보다 커서 카드가 아닌 작은 아이콘으로 보여주기로 했다. 물론 그냥 보여주면 재미 없으니, 자동 재생 슬라이드로 직접 구현해보았다. 라이브러리는 필요없다 상남자에겐! 핵심 원리를 요약하자면, 충분히 긴 이미지 요소 만들기: 반응형 웹사이트이므로, 큰 해상도에도 슬라이드가 끊어지지 않도록 최대 해상도에서도 가득 찰 정도로 이미지 요소를 만들어 한줄이 가득 보이게 함 한 사이클이 이동한 것처럼 보일만큼만 반복 이동 : 아이콘이 한 사이클만 이동하도록 하고, 그것을 애니메이션으로 반복하여 계속 이어서 움직이는 것처럼 보이게 함. (3배로 요소를 붙였으면, 1/3만큼 이동하면 한 사이클이 되겠다.. 2023. 12. 31. [React/Next.js] 라이브러리 없이 구현하는 3D carousel 라이브러리를 사용하지 않고 3D carousel 구현 carousel 은 라이브러리로 구현하면 사용하기 편리하지만, 이 구현을 한 포트폴리오 프로젝트는 최소한의 라이브러리를 사용해서 직접 구현하고자 정했기에, next.js와 css와 html 만으로 구현하였다. 2d 형식의 슬라이드는 너무 못생겼고 간단했기에, 3d로 구현해보았다. 핵심 원리를 요약하자면, Transform 속성 활용: 각 캐러셀 아이템에 transform CSS 속성을 사용하여 3D 회전(rotateY)과 깊이(translateZ)를 조정해 입체적인 효과를 구현 조건부 렌더링과 인덱스 관리: active 상태 변수를 사용하여 현재 활성화된 캐러셀 아이템을 추적하고, 이를 바탕으로 각 아이템의 위치와 스타일을 동적으로 변경 사용자 상호작.. 2023. 12. 31. 이전 1 다음
