• Hallo,


    Ich würde gerne einen Live-Counter in meiner Website erstellen.

    Er sollte z.B. von 0 auf 500 zählen und die Besucher sollen die Steigerung direkt sehen.

    Die Werte sollen fix hinterlegt sein.

    Ich steh zurzeit auf dem Schlauch und weiss gar nicht wie beginnen oder sonst was.

    Hab leider noch keine Erfahrung mit einer solchen Aufgabe getätigt.


    Bitte um Hilfestellung :)


    Danke und Gruss

    hunny design

  • Live? Wenn Du oder irgendetwas den Wert ändert, dann soll es live auf der Webseite aktualisiert werden?


    Da fallen mir 2 Sachen ein:

    Ajax call alle n Sekunden,

    oder websocket.


    Websocket ist aber evtl overkill.

    Daher empfehle ich den ajax call.


    Bsp:

    index.html

    data.php

    PHP
    <?php
    echo rand(0, 11111);


    Ajax Bsp von hier genutzt: https://stackoverflow.com/a/20371831/3411766

  • Vielen Dank für deine Hilfe, ich glaube jedoch ist dies nicht genau das wonach ich suche..


    Ich möchte auf meiner Site meine "Abgeschlossenen Projekte" anzeigen sagen wir z.b. 20.

    Wenn der Besucher nun auf meine Site kommt und in den Bereich scrollt (OnePage) soll die Zahl von 0 auf 20 springen aber die Schritte von 0-20 sollen ersichtlich sein.

    Ist dies Verständlich?


    Danke und Gruss

    hunny design

  • Aso.

    Also 20 Projekte per Seite. Das aber auf der OnePage per scroll getriggert?


    Code
    Meine Seite ... [20 Projekte]
    .
    .
    .
    Meine Seite ... [40 Projekte]
    .
    .
    .
    Meine Seite ... [60 Projekte]


    Das sollte sogar per css only funktionieren.

    Aber das ist nicht meine Welt. Wird aber sicherlich hier jemand wissen.

  • Nein auch nicht so gemeint.


    Unter hunny.ch/hunnydesign kannst du sehen was ich bis jetzt erreicht habe. (Ist unter "Home" zu finden)

    Leider zählt er nun bereits hoch wenn man die Seite besucht ohne das man den Bereich sieht.

    Ich will aber, dass erst hochgezählt wird wenn der Besucher auch in dem Bereich ist.


    Hoffe auf Hilfe :)

  • Ah, meinst du, dass z.B. die 500 bei investierte Stunden hochgezählt werden soll, sobald sich dies im Viewport befindet?


    Das würde nur mit JS gehen.

    Genau das mein ich.

    Habe bereits ein kleines Script drin wo das ganze Hochzählt. Nun muss ich es noch irgendwie hinbringen, dass es nur ausgeführt wird wenn es sich im Viewport befindet.

    Kannst du mir da helfen?

  • Habe eigentlich auch keine Ahnung von JS. Werde aber mal gucken, was sich machen lässt...


    Edit:


    Wow, habe es sogar ohne allzu viel zu googeln mithilfe von jQuery hinbekommen. Hier ist es: https://codepen.io/jr-cologne/pen/GEEJKb


    Das Ganze musst du jetzt natürlich noch in deinen Anwendungsfall integrieren.


    Ich hoffe, du bestehst nicht auf eine pure JS-Lösung. Weil dann wüsste ich definitiv nicht mehr weiter, ohne es selber ausführlich nachzuschauen. :D

  • Und dann kann man eigentlich gleich auf JS setzen...

    Sollte man für solche Sachen sowieso. CSS ist nicht dafür gedacht Userinput zu verarbeiten und in der Hinsicht auch deutlich weniger performant. Mobile Surfer danken für jede Zeile JS, die CSS Spielereien ersetzt.

Jetzt mitmachen!

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