October 2024
-
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.
Check the previous list!
...And check the following list!
