Cool CodePen Demos (October 4)

Lightweight Water Distortion Effect

Ksenia Kondrashova created a demo with a beautiful shader with a water effect. It looks realistic, like water moving in a swimming pool. It feels calming and hypnotic.

---

3D parallax effect on hover

Temani Afif creates amazing effects using a single image tag. This is a great example: One HTML tag creates a startling 3D effect… and the code is so simple! The demo barely requires 18 lines of CSS!

---

Selective saturation on hover

Another cool demo using a single image element. Ana Tudor used SVG filters to apply a color interpolation mask and highlight picture elements based on color.

---

The Annoying Potato

You’ll need the speakers on for this fun demo by Sophia Wood (aka Fractal Kitty). Click on the sound buttons or press the 1–8 buttons to get the potato to talk… but be careful, it may be equally entertaining and annoying.

---

Wheel Gallery (CSS only)

An animated circular gallery created by Chris Bolson. Mouse over the pictures and see them animate. I like how the title shows up alongside the photo movement. Smooth.

---

pointillism NASA images

Another demo by Sophia Wood. She used P5 to generate points that are generated infinitely. Each cycle they will be at a smaller size, revealing a space picture. As usual, a creative combination of art and code.

---

color-contrast checker table

This is more of a “nerdy” accessibility demo: a grid with all the CSS color names and their color contrast combination. Dave Rupert used the WCAG 2.1 specification to determine the results.

---

My Yard sign

Chris Coyier replicates this iconic sign, applying scroll-driven animations to get all lines to dynamically adjust (the text is editable) their font so all lines occupy the same width. Because it uses the animation-range property, this demo will only work on Chrome.

---

Scroll-driven animated card stack with scroll snap events

Paul Noble creates a stunning card stack combining scroll-driven animations with scroll-snap events. You have to use a trackpad (this demo will not work with a mouse) to enjoy the nice transitions.

---

Quick double progress

Another demo by Ana Tudor. The code is clean, short, and semantic. I liked the design of this component (from a Reddit question?) and could see myself using something similar in some projects.

---

---

If you liked this list, check out last month's demos!

The above is the detailed content of Cool CodePen Demos (October 4). For more information, please follow other related articles on the PHP Chinese website!