Beitrag

Ja

aha hi Matthias

warte kurz ich hab ne frage

kennst du dich auch mit SCSS aus?

Ja auch

ich würde nämlich gerne auf meiner Websiide eine Animation verlangsamen. weiß du wie das geht?

*website

animation-duration in CSS

aha danke

Bitte, gern

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?

kann ich dir kurz einen Codeabschnitt reinstellen?

Ja klar

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

}

das ist in einer SCCS Datei

Ja, sehe ich

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

background: black ist deine Farbe

jup

Du kannst statt black einfach eine andere Farbe wählen

das hab ich schon versucht aber es geht nicht

aha ich weiß schon was ich falsch gemacht habe

Was hast du versucht? Die ganze Zeile bitte

Ok

ich. habe es in @media only screen and (min-width: 680px) rein geschrieben

Ok

danke bis vielleicht irgendwann

Gern

Matthias ich hätte da doch noch eine frage

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?

Ja

danke

O_o

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

ich verstehe

ich könnte das aber auch mit . CSS-Animationen machen oder?

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.

Gesundheit

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

aha ok

Nicht abhängig von der Scrollposition, dafür brauchst du JavaScript

ok

ich hab mich jetzt gerade mehr mit HTML und SCCS bzw. CSS beschäftigt deshalb hab ich ein paar Probleme mit JS

könnte ich das so machen?:

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.

aber aus irgendeinen Grund geht das nicht. ich weiß nicht warum

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

*es

aha jetzt geht es

ich habe ausversehen bei animation: fade-in 1s ease-in-out; statt 1s, 0 s geschrieben.

danke für deine hilfe

Ok

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

ok. das werde ich gleich probieren

animation-fill-mode: forwards in deinem Fall

jup habe ich schon gemacht

danke nochmal für deine Hilfe und zeit

Gern

kenne mich auch ein wenig aus

aha nice

Ich verstehe kein Wort

Kann das irgendwer auf deutsch übersetzen? XD

Näää

Programmiergeheumnisse

*geheimnisse

Same

Musst du ach nd.

*auch

Geheimnisse würde ich das nicht nennen