Statistik Zählerstände animieren

Wer die Zählerstände der wpForo Statistik von Null bis aktuellem Wert animieren will, kann dies mit folgenden Skript und Änderungen in der footer.php erreichen

Das von mir verwendete Skript sieht so aus: (siehe auch = jQuery Animated Number Counter From Zero To Value)

In die Zwischenablage kopieren

add_action( 'wp_head', function () { if ( ! is_page( array( 42,'forum', 968 ) ) ) return; ?>
<script>
jQuery(document).ready(function($) {
	
    //Check if an element was in a screen
     function isScrolledIntoView(elem){
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom <= docViewBottom));
    }
    //Count up code
    function countUp() {
        $('.wpf-stat-value').each(function() {
          var $this = $(this), // <- Don't touch this variable. It's pure magic.
              countTo = $this.attr('data-count');
              ended = $this.attr('ended');

if ( ended != "true" && isScrolledIntoView($this) ) {
            $({ countNum: $this.text()}).animate({
            countNum: countTo
          },
          {
            duration: 5000, //duration of counting
            easing: 'swing',
            step: function() {
              $this.text(Math.ceil(this.countNum).toLocaleString('de-DE')); 
            },
            complete: function() {
              $this.text(Math.ceil(this.countNum).toLocaleString('de-DE')); 
            }
          });
        $this.attr('ended', 'true');
        }
        });
    }
	//Start animation on page-load
    if ( isScrolledIntoView(".wpf-stat-value") ) {
        countUp();
    }
    //Start animation on screen
    $(document).scroll(function() {
        if ( isScrolledIntoView(".wpf-stat-value") ) {
            countUp();
        }
    }); 	
});
</script>

Damit das Skript nur auf der Forumsseite ausgeführt wird oben in der „add_action“ Zeile „forum“ einfügen, bzw. „community“ wenn ihr community verwendet.

Bei .toLocaleString(‚de-DE‘)) könnt ihr das de-DE durch eure Länderkennung ersetzen. sollte Deutschland nicht korrekt sein

Ich verwende das Code Snippets Plugin zum einfügen diverser Skripte und und Codes.

Nun zu den Änderungen in der footer.php von wpForo.

Oberhalb von

In die Zwischenablage kopieren

Diesen Codeteil einfügen

In die Zwischenablage kopieren

Weiter geht es mit den Statistik Codes.

Hier müssen diese Codezeilen geändert / erweitert werden.

Beispiel die Anzahl der Foren:

In die Zwischenablage kopieren

Ändern in

In die Zwischenablage kopieren

Dies bei allen Statistiken auf diese Weise bearbeiten, darauf achten das ihr „$stat“ in „$statistic“ ändert.

Noch ein kurzes Video wie die Animation aussieht, oder einfach in der wpForo Community live ansehen.

Ihr habt Fragen hierzu, dann einfach ein Thema im Forum eröffnen?!

wpForo Community
Tutorials und Tricks für dein Forum

wpForo Statistik Zählerstände animieren von Null bis aktuellem Wert

Hinterlasse einen Kommentar Antworten abbrechen

wpForo Statistik Zählerstände animieren von Null bis aktuellem Wert

Ähnliche Beiträge

Hinterlasse einen Kommentar Antworten abbrechen