Sanfte Seitenwechsel mit CSS View-Transitions đ
Ich habe meine Website mit CSS View-Transitions optimiert, um ein flĂŒssigeres und moderneres Navigationserlebnis zu bieten! đ Dank dieser neuen CSS-Technologie wirken Seitenwechsel nicht mehr abrupt, sondern laufen mit sanften ĂbergĂ€ngen ab.
Möglich macht das die @view-transition-Regel, mit der sich Animationen fĂŒr den Wechsel zwischen Seiten ganz ohne JavaScript steuern lassen. Ich verwende dabei folgende Konfiguration:
@view-transition {
navigation: auto;
type: morph;
}
đč navigation: auto; sorgt dafĂŒr, dass View-Transitions automatisch bei jedem Seitenwechsel aktiviert werden.
đč type: morph; bewirkt, dass Ă€hnliche Elemente zwischen zwei Seiten nahtlos ineinander ĂŒbergehen, anstatt neu zu erscheinen oder zu verschwinden.
WordPress: Wichtige Anpassung in der header.php
Wenn du View-Transitions in WordPress nutzen möchtest, musst du eine kleine Ănderung in der header.php deiner Website vornehmen. FĂŒge folgende Zeile im <head>-Bereich ein:
<meta name="view-transition" content="same-origin">
Dieser Meta-Tag ist notwendig, damit View-Transitions ĂŒber verschiedene Seiten hinweg funktionieren. Ohne diese Einstellung bleibt der Effekt auf einzelne Elemente innerhalb einer Seite beschrĂ€nkt.
Browser-UnterstĂŒtzung
Aktuell funktionieren View-Transitions nur in Google Chrome und anderen Chromium-basierten Browsern wie Brave oder Opera. In Firefox und Microsoft Edge wird diese Funktion leider noch nicht unterstĂŒtzt. Falls du also keinen Effekt siehst, könnte das an deinem Browser liegen.
Falls dein Browser es unterstĂŒtzt, kannst du es direkt auf meiner Website ausprobieren. Ich freue mich ĂŒber dein Feedback! Viel SpaĂ beim Erkunden! đ
Dieser Text wurde KI-generiert.