경량 물 왜곡 효과

Ksenia Kondrashova는 물 효과가 적용된 아름다운 셰이더로 데모를 만들었습니다. 마치 수영장에서 물이 움직이는 것처럼 사실적으로 보입니다. 차분하고 최면에 걸린 듯한 느낌이 듭니다.

호버 시 3D 시차 효과

Temani Afif는 단일 이미지 태그를 사용하여 놀라운 효과를 만들어냅니다. 이것은 훌륭한 예입니다. 하나의 HTML 태그가 놀라운 3D 효과를 생성합니다. 그리고 코드는 매우 간단합니다! 데모에는 18줄의 CSS가 거의 필요하지 않습니다!

호버 시 선택적 채도

단일 이미지 요소를 사용한 또 다른 멋진 데모입니다. Ana Tudor는 SVG 필터를 사용하여 색상 보간 마스크를 적용하고 색상을 기반으로 그림 요소를 강조 표시했습니다.

짜증나는 감자

Sophia Wood(일명 Fractal Kitty)의 재미있는 데모를 보려면 스피커가 필요합니다. 소리 버튼을 클릭하거나 1~8개의 버튼을 눌러 감자가 말하게 하세요. 하지만 조심하세요. 재미있기도 하고 짜증스러울 수도 있습니다.

휠 갤러리(CSS에만 해당)

Chris Bolson이 만든 애니메이션 원형 갤러리입니다. 사진 위로 마우스를 이동하면 움직이는 모습을 볼 수 있습니다. 사진의 움직임과 함께 제목이 표시되는 방식이 마음에 듭니다. 매끄러운.

점묘법 NASA 이미지

Sophia Wood의 또 다른 데모입니다. 그녀는 P5를 사용하여 무한히 생성되는 포인트를 생성했습니다. 각 주기마다 크기가 작아져 우주 그림이 드러납니다. 늘 그렇듯이 예술과 코드의 창의적인 조합입니다.

색상 대비 검사기 테이블

이것은 모든 CSS 색상 이름과 색상 대비 조합이 포함된 그리드인 "괴상한" 접근성 데모에 가깝습니다. Dave Rupert는 WCAG 2.1 사양을 사용하여 결과를 확인했습니다.

마이야드 간판

Chris Coyier는 이 상징적인 기호를 복제하여 스크롤 기반 애니메이션을 적용하여 모든 줄이 동적으로 글꼴을 조정(텍스트 편집 가능)하도록 하여 모든 줄이 동일한 너비를 차지하도록 합니다. animation-range 속성을 사용하기 때문에 이 데모는 Chrome에서만 작동합니다.

스크롤 스냅 이벤트가 포함된 스크롤 기반 애니메이션 카드 스택

Paul Noble은 스크롤 기반 애니메이션과 스크롤 스냅 이벤트를 결합하여 놀라운 카드 스택을 만듭니다. 멋진 전환을 즐기려면 트랙패드(이 데모는 마우스에서는 작동하지 않음)를 사용해야 합니다.

빠른 더블 진행

Ana Tudor의 또 다른 데모입니다. 코드는 깨끗하고 짧으며 의미가 있습니다. 나는 이 구성 요소의 디자인이 마음에 들었고(Reddit 질문에서?) 일부 프로젝트에서 비슷한 것을 사용하는 모습을 볼 수 있었습니다.

이 목록이 마음에 드셨다면 지난달 데모를 확인해 보세요!