no library2 [React/Next.js] 라이브러리 없이 구현하는 자동 재생 슬라이드 라이브러리를 사용하지 않고 무한 자동 재생 슬라이드 구현 포트폴리오에서 만든 광택 효과가 적용된 기술 스택 카드가 생각보다 커서 카드가 아닌 작은 아이콘으로 보여주기로 했다. 물론 그냥 보여주면 재미 없으니, 자동 재생 슬라이드로 직접 구현해보았다. 라이브러리는 필요없다 상남자에겐! 핵심 원리를 요약하자면, 충분히 긴 이미지 요소 만들기: 반응형 웹사이트이므로, 큰 해상도에도 슬라이드가 끊어지지 않도록 최대 해상도에서도 가득 찰 정도로 이미지 요소를 만들어 한줄이 가득 보이게 함 한 사이클이 이동한 것처럼 보일만큼만 반복 이동 : 아이콘이 한 사이클만 이동하도록 하고, 그것을 애니메이션으로 반복하여 계속 이어서 움직이는 것처럼 보이게 함. (3배로 요소를 붙였으면, 1/3만큼 이동하면 한 사이클이 되겠다.. 2023. 12. 31. [React/Next.js] 라이브러리 없이 구현하는 카드 회전 및 광택 효과 라이브러리를 사용하지 않고 카드 회전 및 광택 효과 구현 기술 스택을 어떻게 보여줄까 고민을 좀 했다. 기존 포트폴리오에서는 intersectionobserver 를 이용하여 화면에 해당 기술이 보이면 svg로 도넛 모양이 퍼센트로 차며 숙련도를 보여주고 옆에 텍스트를 배치했었는데... 나만 어렵게 구현했다고 만족하고 보는 재미가 없었다. 기술 아이콘이 없는 기술스택이라니... 아이콘 보는 맛이 찰져야 하는데... 그래서 고심하다가 카드형식으로 만들어 보았고, 시각적 재미를 위해서 포켓몬 카드의 홀로그램 회전 효과를 적용해보았다. 볼만하다 핵심 원리를 요약하자면, 마우스 위치에 따라 동적으로 css 설정: pc 뿐 아니라 다른 기기에도 사용할 수 있도록 포인트 이벤트를 사용하여 카드위에 위치한 마우스의 .. 2023. 12. 31. 이전 1 다음
