Zurück

Kenntnisse in JavaScript gesucht

Kommentare (75)

animation-duration in CSS

ich hab eine liste erstellt die wenn, ich dort raufgehe mit den Mauszeiger, eine Linie von recht nach links zieht. also einen Unterstrich. ich würde aber gerne die färbe dieses Unterstriches ändern. weißt du auch wie das geht?

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 ☆𝐏𝐚𝐲𝐭𝐨𝐧𝐢𝐮𝐦☆

als letztes wollte ich die Bilder und den text einblenden lassen (also das der text von oben runterschwebt wenn man noch unter scrollt) Ich hab nur keine Ahnung wie das geht kannst du mir da helfen?

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.

Matthias

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.

aha ok. danke

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); } }

☆𝐏𝐚𝐲𝐭𝐨𝐧𝐢𝐮𝐦☆

.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.

Matthias

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.

jup so sollt ees eigentlich 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