Schöne Demo von Sebastiano Guerriero. Wenn sich ein Header mit fester Position von unterschiedlich gefärbten Hintergründen überlappt, ändern sich die Farben, um zu dem Hintergrund zu passen. Sebastianos Technik ist sehr clever und beinhaltet mehrere Kopien des Headers innerhalb jedes Abschnitts (die Kopien sind für Screenreader versteckt), die alle übereinander positioniert und dann enthüllt werden, wenn der neue Abschnitt erscheint, dank eines clip-path für jeden Abschnitt.
Ein echter CSS-Trick, wenn ich je einen gesehen habe.
Es lässt mich wünschen, es gäbe einen einfacheren Weg, dies zu tun. Was wäre, wenn es einen magischen Wert für mix-blend-mode gäbe, der das erledigen würde? Ich bin nah genug herangekommen, dass es mir Hoffnung gibt.
Interessante Idee, aber wie Sie schrieben, hoffe ich, dass es eine robustere (und kompaktere) Lösung geben könnte. Ich werde auf einen Ihrer Tricks warten :-)
Ich liebe diesen Effekt! Man kann ihn auch in Aktion sehen auf https://www.dropbox.com/
Letztes Jahr habe ich im Detail erklärt, wie man ihn in einem Blogbeitrag erzielt
https://dev.to/mornir/cool-css-effect-j2n
Es hat mich lange gekostet, die Überlappung und die
clip-path-Eigenschaft zu verstehen. Ich bin froh zu erfahren, dass es vielleicht einen einfacheren Weg gibt.Wirklich cool! Danke fürs Teilen.
Ich habe einige 'backdrop-filter: blur(3px);' zur Klasse 'site-header' hinzugefügt, um den Header und den Inhalt etwas mehr zu trennen.
Man kann einfach den Intersection Observer von Javascript verwenden, um einen Header wie diesen zu erstellen. Mehrere HTML-Elemente sind nicht nötig.
Klicken Sie hier, um ein Beispiel für einen Header zu sehen, der beim Scrollen die Farben wechselt
Ich habe ein leeres
<div>zu jedem<section>hinzugefügt und angewendetwenn es unter dem
<header>scrollt, greiftmix-blend-mode: difference;.Sehr cool.
Wir haben das vor einiger Zeit mit "position sticky" gemacht. Glauben Sie mir, ich habe mich bemüht, einen prägnanteren Weg zu finden. Ich habe mich schließlich für Javascript entschieden, war aber mit der Leistung unzufrieden. Also haben wir es mit CSS und CSS clip-path: inset(0) gemacht. Es hat jedoch einen Fehler; ES FUNKTIONIERT NICHT IN FIREFOX.
CSS in Firefox ist ehrlich gesagt sehr fehlerhaft. Jedenfalls ist das unsere Version davon: https://studio.avvent.io