10가지 멋진 CodePen 데모(2024년 9월)

템파니 아피프는 아바타의 위치에 따라 적응하는 애니메이션 노치를 특징으로 하는 CSS 트릭을 만들었습니다. 이 트릭은 단 몇 줄의 HTML과 CSS 코드만으로 구현되었습니다. 라파는 컴퓨터의 시간에 따라 시간을 표시하는 움직이는 막대를 제공하는 대화형 데모를 개발했습니다. 이는 사용자에게 개인화된 경험을 제공합니다. 크세니아 콘드라쇼바는 다양한 효과를 사용자 정의할 수 있는 가벼운 픽셀 왜곡 애니메이션을 만들기 위해 셰이더를 실험했습니다. 기욤 마르티니는 Pencil.js를 사용하여 무한한 소나무 숲을 만들었습니다. Pencil.js는 2D 그래픽 라이브러리이며, 평화로운 3D 효과를 만듭니다. 그랜트 젠킨스는 자바스크립트를 사용하여 부드럽고 재미있는 세부 사항을 특징으로 하는 춤추는 벌레 애니메이션을 만들었습니다. 메르김 우이카니는 HTML과 CSS만을 사용하여 도커 로고의 애니메이션 버전을 만들었습니다. 이 버전에서는 고래가 바다에서 헤엄치고 뛰는 모습을 보여줍니다. 마리아나 벨디는 부드러운 스크롤링 경험을 제공하는 데모를 개발했습니다. 이 데모에서는 요소가 움직이고, 줄어들고, 사라집니다. 기브슨은 리액트와 프레이머 모션을 사용하여 올림픽 메달 카운터 컴포넌트를 만들었습니다. 이는 스포츠 웹사이트에서 멋진 위젯이 될 수 있습니다. 존 칸트너는 사용자 상호작용과 시간이 지남에 따라 애니메이션되는 녹음 위젯을 개발했습니다. 유안추안은 SVG와 CSS를 사용하여 매혹적인 회전 애니메이션을 만들었습니다. 이 애니메이션은 매우 간단한 코드로 구현되었습니다.