Coole CodePen-Demos (4. Oktober)

Leichter Wasserverzerrungseffekt

Ksenia Kondrashova hat eine Demo mit einem wunderschönen Shader mit Wassereffekt erstellt. Es sieht realistisch aus, wie Wasser, das sich in einem Schwimmbad bewegt. Es fühlt sich beruhigend und hypnotisch an.

3D-Parallaxeneffekt beim Schweben

Temani Afif erzeugt erstaunliche Effekte mit einem einzigen Bild-Tag. Das ist ein tolles Beispiel: Ein HTML-Tag erzeugt einen verblüffenden 3D-Effekt … und der Code ist so einfach! Die Demo benötigt kaum 18 Zeilen CSS!

Selektive Sättigung beim Schweben

Eine weitere coole Demo mit einem einzelnen Bildelement. Ana Tudor verwendete SVG-Filter, um eine Farbinterpolationsmaske anzuwenden und Bildelemente basierend auf der Farbe hervorzuheben.

Die lästige Kartoffel

Für diese unterhaltsame Demo von Sophia Wood (auch bekannt als Fractal Kitty) benötigen Sie die Lautsprecher. Klicken Sie auf die Tontasten oder drücken Sie die Tasten 1–8, um die Kartoffel zum Sprechen zu bringen ... aber seien Sie vorsichtig, es kann gleichermaßen unterhaltsam und nervig sein.

Radgalerie (nur CSS)

Eine animierte kreisförmige Galerie, erstellt von Chris Bolson. Fahren Sie mit der Maus über die Bilder und sehen Sie, wie sie animiert werden. Mir gefällt, wie der Titel neben der Fotobewegung angezeigt wird. Glatt.

Pointillismus NASA-Bilder

Eine weitere Demo von Sophia Wood. Sie nutzte P5, um Punkte zu generieren, die unendlich generiert werden. Mit jedem Zyklus werden sie kleiner und geben ein Raumbild frei. Wie immer eine kreative Kombination aus Kunst und Code.

Farbkontrast-Prüftabelle

Dies ist eher eine „nerdige“ Barrierefreiheitsdemo: ein Raster mit allen CSS-Farbnamen und ihrer Farbkontrastkombination. Dave Rupert verwendete die WCAG 2.1-Spezifikation, um die Ergebnisse zu ermitteln.

Mein Yard-Schild

Chris Coyier repliziert dieses ikonische Zeichen und wendet scrollgesteuerte Animationen an, um alle Zeilen dazu zu bringen, ihre Schriftart dynamisch anzupassen (der Text ist bearbeitbar), sodass alle Zeilen die gleiche Breite einnehmen. Da die Eigenschaft „animation-range“ verwendet wird, funktioniert diese Demo nur auf Chrome.

Scrollgesteuerter animierter Kartenstapel mit Scroll-Snap-Ereignissen

Paul Noble erstellt einen atemberaubenden Kartenstapel, der scrollgesteuerte Animationen mit Scroll-Snap-Ereignissen kombiniert. Sie müssen ein Trackpad verwenden (diese Demo funktioniert nicht mit einer Maus), um die schönen Übergänge genießen zu können.

Schneller doppelter Fortschritt

Eine weitere Demo von Ana Tudor. Der Code ist sauber, kurz und semantisch. Mir gefiel das Design dieser Komponente (aus einer Reddit-Frage?) und ich könnte mir vorstellen, in einigen Projekten etwas Ähnliches zu verwenden.

Wenn Ihnen diese Liste gefallen hat, schauen Sie sich die Demos des letzten Monats an!

Das obige ist der detaillierte Inhalt vonCoole CodePen-Demos (4. Oktober). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!