라이브러리 없이3 [React/Next.js] 라이브러리 없이 구현하는 카드 회전 및 광택 효과 라이브러리를 사용하지 않고 카드 회전 및 광택 효과 구현 기술 스택을 어떻게 보여줄까 고민을 좀 했다. 기존 포트폴리오에서는 intersectionobserver 를 이용하여 화면에 해당 기술이 보이면 svg로 도넛 모양이 퍼센트로 차며 숙련도를 보여주고 옆에 텍스트를 배치했었는데... 나만 어렵게 구현했다고 만족하고 보는 재미가 없었다. 기술 아이콘이 없는 기술스택이라니... 아이콘 보는 맛이 찰져야 하는데... 그래서 고심하다가 카드형식으로 만들어 보았고, 시각적 재미를 위해서 포켓몬 카드의 홀로그램 회전 효과를 적용해보았다. 볼만하다 핵심 원리를 요약하자면, 마우스 위치에 따라 동적으로 css 설정: pc 뿐 아니라 다른 기기에도 사용할 수 있도록 포인트 이벤트를 사용하여 카드위에 위치한 마우스의 .. 2023. 12. 31. [React/Next.js] 라이브러리 없이 구현하는 카드 조명 효과 라이브러리를 사용하지 않고 카드 조명 효과 구현 카드 광택을 구현하다가 원형 그라데이션으로 카드를 비추면 어떨까 라는 생각에 시도해본 카드 조명 구현하기! 어둡게 뒤덮은 레이아웃을 마우스로 비춰서 밝히는게 미묘하게 어려웠다. 내가 원하는 만큼 밝지 않거나, 마우스로 밝혀도 카드가 보이질 않거나, 선형 그라데이션 효과와 충돌나서 이상하게 동작하거나, 조명이라기보다 구멍난것처럼 보이거나... 시행착오가 참 많았다. 하루를 거의 꼬박 써서 구현하였다. 핵심 원리를 요약하자면, 마우스 위치에 따라 동적으로 css 설정: pc 뿐 아니라 다른 기기에도 사용할 수 있도록 포인트 이벤트를 사용하여 카드위에 위치한 마우스의 offset 위치를 이용하여 css로 설정한 선형 그라데이션의 위치를 backgroundPost.. 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 다음
