Hallo, Besucher der Thread wurde 3,1k aufgerufen und enthält 11 Antworten

letzter Beitrag von Buerste am

[Box] Breaking News

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,

    nachfolgend einmal eine Möglichkeit, um eine horizontale und animierte "Breaking News" Leiste zu verwirklichen.

    Demo

    Codepen.io: Breaking News

    Features

    • Kein JS oder jQuery benötigt (pures Html und CSS)
    • Einfache intrigation
    • Einfaches anpassen des Styles

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Benutzung

    1. In den Zeilen box-shadow: inset 0 0 2px #000; und box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4); sowie auch .red{ background: #D00205 } und .red span { background: #BA0000 } den Style anpassen.
    2. Über @keyframes ticker kann die animation angepasst oder auch erweitert werden.


    Viel Spaß damit ;)

    Gruss,
    Andreas

  • Belarus

    Hat den Titel des Themas von „Breaking News“ zu „Box: Breaking News“ geändert.

    Kann man das ich wie so bei dem "Links nach Rechts" laufen lassen ?


    Find die stelle nicht

    Kann man das ich wie so bei dem "Links nach Rechts" laufen lassen ?

    Die Stelle nach der Du jedoch suchst wäre hier @keyframes ticker. Diese müsstest Du entsprechend Deinen Wünschen anpassen. Wie zu erkennen ist, stehen diese (im bereit gestellten Beispiel) auf margin-top (nach oben). Wenn Du aber eine andere Laufrichtung möchtest, dann muss diese entsprechend angepasst werden - z.B. mit: margin-left (nach links), margin-right (nach rechts) oder margin-bottom (nach unten) und das natürlich bei allen keyframes-Angaben!


    Außerdem wären noch weitere Anpassungen notwendig, wie u.a.:

    1. Die Animation animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    2. Der Abstand der Laufschrift innerhalb des Tickers

    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

    Dieses Thema enthält 9 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.
  • Dieses Thema enthält 9 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!