Zurรผck

Kenntnisse in JavaScript gesucht

Kommentare (75)

animation-duration in CSS

Womit zeichnest du diese Linie?

nav { position: fixed; right: 0; top: 0; background-color: rgb(255, 255, 255); height: 100vh; width: 50%; z-index: 999; text-transform: uppercase; flex: 1;

ul { list-style-type: none; padding: 0; margin-top: 12;

li { list-style: none; display: inline-block; position: relative; }

li::after{ content: " "; height: 2px; width: 0%; position: absolute; background: black; left: 0; bottom: -10px; transition: 1s; }

li a { text-decoration: none; }

li:hover::after{ width: 100%; } }

}

ok, nav ul li::after ist also die Linie

background: black ist deine Farbe

Du kannst statt black einfach eine andere Farbe wรคhlen

Was hast du versucht? Die ganze Zeile bitte

Kommentar gelรถscht von ๐”‰๐”ข๐”ฒ๐”ข๐”ฏ๐”ฐ๐”ฑ๐”ข๐”ฏ๐”ซ

Du solltest eine CSS-Klasse zu dem betreffenden Element hinzufรผgen, wenn รผber einen bestimmten Punkt gescrollt wurde. Das geht mit JavaScript und am besten mit einem IntersectionObserver.

Das Element hรคtte dann normalerweise z.B.:

.images-and-text { transform: translateY(-100px); transition: transform 1s; }

Du kannst dann eine Klasse hinzufรผgen, wenn das Element im Viewport ist:

.images-and-text--visible { transform: translateY(0); }

Klasse hinzufรผgen geht in JavaScript mit:

document.querySelector('images-and-text').classList.add('images-and-text--visible');

Allerdings soll die Klasse erst hinzugefรผgt werden, wenn รผber einen bestimmten Punkt gescrollt wurde, also brauchst du dafรผr einen IntersectionObserver.

Nein, nur mit CSS geht sowas nicht. Du kannst mit CSS hรถchstens die Animation beim Laden der Seite triggern z.B.

Nicht abhรคngig von der Scrollposition, dafรผr brauchst du JavaScript

Punkt vergessen bei der Klasse im querySelector, sorry:

document.querySelector('.images-and-text').classList.add('images-and-text--visible');

๐”‰๐”ข๐”ฒ๐”ข๐”ฏ๐”ฐ๐”ฑ๐”ข๐”ฏ๐”ซ

.image { opacity: 0; animation: fade-in 1s ease-in-out; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

.text { transform: translateY(100px); animation: slide-in 1s ease-in-out; }

@keyframes slide-in { 0% { transform: translateY(100px); } 100% { transform: translateY(0); } }

so habe ich das jetzt.

Irgendetwas solltest du schon sehen. Der .text sollte sich von unten nach oben bewegen um 100px und das .image sollte รผber 1 Sekunde einblenden, aber danach wieder unsichtbar sein.

Du kannst animation-fill-mode verwenden, wenn du den Zustand nach Ablauf der Animation behalten mรถchtest

animation-fill-mode: forwards in deinem Fall

Kann das irgendwer auf deutsch รผbersetzen? XD

Kissenelefant

Ich verstehe kein Wort

Same