Mehrere Texte nebeneinander „im Kreis fahrend“

  • Hallöchen, ich wollte euch fragen ob ihr zufällig wisst, wie sich soetwas umsetzen lässt.


    http://www.basili.co - gemeint ist die Anfangsanimation

    Anm.: nur am Handy/Mobile Version sichtbar.


    Und dann noch weiter unten die fahrenden Schriften die sich von links nach rechts im Kreis bewegen. („our Work“ „Get in Touch“)

    Anm.: auf dem Handy & Desktop sichtbar


    ich hab diesbezüglich schon ein wenig recherchiert leider nicht wirklich fündig geworden.


    liebe Grüße :)

  • Wie meinst du das genau ?

    Du hast jetzt 5 <span> Elemente.

    Soll der 1,3 und 5 von Link nach rechts laufen und der

    2, und 4 von rechts nach Links ?


    Falls ja das geht , doch dafür hast du den falschen weg gestartet.

    So wie es jetzt ist könnte man es mit JS machen.

    Für reinen Css würde ich den 1,3,5 eine Klasse geben und 2,4 eine andere Klasse.

    Das span durch ein <div> ersetzen oder das <span> mit Css bearbeiten

  • Hallo, danke für die Antwort.


    Nein, ich ich wollte es kopieren mit anderem Text darin.


    allerdings möchte ich, dass das 2. von links nach rechts läuft und nicht wie das obere von rechts nach links. Habe versucht „left“ zu „right“ zu ändern, hat aber leider nicht den gewünschten Effekt gebracht.


    Daher: 1:1 wie das andere (Design Funktion etc) aber dass es sich von links nach rechts bewegt.


    lg

  • also nicht das 2. span sondern der ganze Code dupliziert (html/css)


    1. wie bereits aus codepen zu entnehmen

    2. genauso nur andere Richtung fahrend :)


    Edit: sorry falls ich mich etwas unverständlich ausgedrückt habe.

    - was muss ich machen/ändern damit das gesamte Ding (alle Spans etc.) von links nach rechts fahren?

  • Die Texte schieben sich aus unerklärlichen Gründen übereinander :/

    span sind inline-Elemente -> display:block (oder div) verwenden.


    Aber es hat schon seinen Grund warum <marquee> abgeschafft wurde, auch wenn man den Unsinn mit CSS nachbaut bleiben Laufschriften nicht sinnvoll.

  • Mh, wenn ich es zu Display:Block statt inline-Block ändere, laufen die Texte ja in unterschiedlichen Zeilen nach rechts.

    Sie sollten aber alle in einer Linie laufen - von links nach rechts durchs Bild.


    Sorry :-/

    Verstehe nicht, warum sich der Effekt nicht einfach umdrehen lässt, ohne dass die Texte übereinander springen/sich schieben.

  • Mh, wenn ich es zu Display:Block statt inline-Block ändere, laufen die Texte ja in unterschiedlichen Zeilen nach rechts.

    Sie sollten aber alle in einer Linie laufen - von links nach rechts durchs Bild.

    was denkst du den was

    Code
    animation-delay: 0.8s;

    macht ?

    Mache da überall eine 0 rein oder lösche die ganzen Zeilen komplett.( LÖSUNG = Zeile 21-41 löschen, und den SPAN inline-block als block ändern)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!