Zurück

Kenntnisse in JavaScript gesucht

Kommentare (75)

    • kennst du dich auch mit SCSS aus?

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

    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?

    kann ich dir kurz einen Codeabschnitt reinstellen?

    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

    Matthias

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

    jup

    Du kannst statt black einfach eine andere Farbe wählen

    Matthias

    background: black ist deine Farbe

    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

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

    Kommentar gelöscht von Paytonium®

    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?

    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.

    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.

    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

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

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

    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

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

    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

    danke nochmal für deine Hilfe und zeit

    Kann das irgendwer auf deutsch übersetzen? XD

    Programmiergeheumnisse

    Kissenelefant

    Ich verstehe kein Wort

    Same

    Kissenelefant

    Ich verstehe kein Wort

    Musst du ach nd.

    Cerberus

    Programmiergeheumnisse

    Geheimnisse würde ich das nicht nennen

    Solides Hermelin