Hallo, Besucher der Thread wurde 873 aufgerufen und enthält 0 Antworten

letzter Beitrag von Belarus am

[JS] Animierter Count Up

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 wie Ihr einen so genannten "Count up" Counter auf euren Seiten verwirklichen könnt. Wie der Name schon sagt, werden hier die Werte nach oben gezählt und animiert wiedergeben. Also quasi wie ein Rückwärts laufender Countdown.


    Features

    • Leichte Integration
    • Einfaches anpassen an Deinen Style
    • Beliebig einsetzbare Font-Awesome (4.7) Icons
    • Quasi unendlich erweiterbar





    Demo

    Eine Live Demo dazu findest Du hier bei: Codepen.io: Count up

    Quellcode

    Da jQuery und Font-Awesome (4.7) bereits Standardgemäß enthalten sind, ist das einbinden dessen nicht notwendig. Auch die im folgenden Beispiel verwendete Schriftart Ubuntu ist optional, so dass diese entweder enthalten, angepasst oder gänzlich entfernt werden kann.


    Wichtig: Hier im Beispiel wurde die Flex-Methode genutzt. Ich empfehle jedoch das anpassen des folgenden Quellcodes an dem Layout-Expansion-Kit (von CLS-Design).

    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.
    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. Quellcode wie o.a. nutzen oder, welches empfehlenswerter ist, an dem Layout-Expansion-Kit (von CLS-Design) anpassen.
    2. Font-Awesome Icons und Texte nach belieben editieren
    3. Style anpassen

    Lizenz

    Das "Layout-Expansion-Kit" unterliegt einer eigenen Lizenz von CLS-Design, so dass diese bitte zu beachten sind!

    Screenshot

    Beachte. dass dieses nur ein Screenshot ist. EIne Live Demo dazu findest Du hier bei: Codepen.io: Count up



    Viel Spaß damit ;)


    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.

  • Belarus

    Hat den Titel des Themas von „Animierter Count Up“ zu „[JS] Animierter Count Up“ geändert.

Jetzt mitmachen!

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