Der beste Fixed-Header Effekt für 2023 [DE/Tutorial]

[@alexanderg4404]

ENDLICH!!!! super genial, ich suche tatsächlich seit 2 jahren genau diese lösung. die css alternative von meinem vorgänger habe ich auch recht schnell verworfen, da es dann meist genau wie du geschrieben hast, zu konflikten bei bunten untergründen gab. vielen vielen dank 💪🏻

[@UnleashedDesign]

Danke, freut mich wenn es dir weiterhelfen konnte :)

[@alexanderg4404]

@@UnleashedDesign Irgendwie wechselt er die Logofarbe, egal ob ich black oder white in der Container Klasse definiere. Es scheint als würde er immer wechseln, egal welche Klasse neben der "custom-section" gesetzt wird. Mache ich etwas falsch oder hab ich einen Gedankenfehler?!

[@svaenio]

Cooles Tutorial, wie immer, gucke die immer sehr gerne. Hatte hektisch sofort drauf geklickt, in der Hoffnung, dass du das ggf. Mit Mix-Blend-Mode gelöst hättest. 😅 Ich struggle momentan etwas, Mix-Blend-Mode mit SVGs zu verbinden. Einfach nur ein Wechsel zwischen schwarz/weiß reicht mir bei meinem aktuellen Projekt wegen vieler Bilder nicht, die auch hinter dem Logo sein können, da hätte ich gern quasi immer das invertierte dessen, was darunter liegt, auch wenn’s ein Bild ist.

[@kisenjiu3999]

Hey cooles video aber ich hab mich gefragt geht das nicht reintheoretisch auch ohne JS einfach mit CSS "mix-blend-mode: difference" habs nämlich ausprobiert und hat den selben effekt :D

[@UnleashedDesign]

Ja absolut sofern es wirklich nur "Black and White" ist :) wenn du aber z.B. das Logo in auf Schwarzen Grund in den Originalen Logo Farben anzeigen willst oder auch andere Farben nutzen möchtest hast du damit Probleme. Aber ja sofern es nur Schwarz auf Weiß sein sollte wäre das die bessere Methode :)

[@kisenjiu3999]

Stimmt hast du recht 😊

[@Plunzi]

Dachte genau das selbe

[@AtzeDevDesigns]

Super Hinweis, danke! Funktioniert das denn auch für fixed Elemente? Bei mir funktioniert der Blend-Mode genau dann nicht. Und da mein Header fixed ist (war es deiner in deinem Test auch?), funktioniert mix-blend-mode nicht :-( Hast du eine Idee? @kisenjiu3999

[@AtzeDevDesigns]

Ich beantworte die Frage mal selbst. Ich war in einem verschachtelten Container unterwegs, dessen Style den Blend-Mode verhindert hat. Hebe ich den Logo Container auf eine andere Ebene, funktioniert alles. Danke noch mal!

[@ralfhein3207]

Wieder mal tolles Video, leider kam es für mich zu spät. Hätte zu mein Werbebanner Projekt gepasst, Ich musste von unten nach oben ein blauen Overlayer der überein Titel gehen, wo sich die Textfarbe wechselte, aber ich denke, dass eine Gelegenheit für dieses Skill für mich wieder gibt.😊🙃🥰

[@UnleashedDesign]

Danke, freut mich wenn dir das Video gehfallen hat :)

[@DoomDesign]

Danke für das Tutorial, werd ich sicher mal für zukünftige Dinge gebrauchen können! Wobei ich mich etwas am ScrollListener störe. Ich hab schon oft genug mit Performanceproblemen bei sowas zu kämpfen gehabt, so dass ich an der Stelle überlege ob man das nicht mit einem IntersectionObserver (da steckt ja schon im Namen worum es bei dem Effekt geht :D ) leichter und/oder performanter umzusetzen wäre...

[@UnleashedDesign]

Das Problem ist, das man mit einem IntersectionObserver nur die Information bekommt das ein Element im Screen ist aber nicht genau die px Anzahl wie weit es im Screen ist

[@sebastianforster7992]

@@UnleashedDesign die aussage gildet nicht weil du das ja auf dem entsprechenden event testen kannst ob es in deinem header ist. Das ist performanter als immer wieder beim scroll jedes element zu berechnen :)

[@konstantinh.9417]

Hello "TheDeepForces" XD

[@konstantinh.9417]

Nein, vielen Dank für dieses Video, ich fand es (wie eigentlich immer auf diesem Kanal) sehr hilfreich.