24. März 2023

jQuery Count up

Mit folgendem jQuery-Script wird von 0 bis zu einer definierten Zahl hochgezählt, sobald die Zahl auf dem Bildschirm zu sehen ist. Neben der Hochzählfunktion habe ich hier noch eine Zufallsfunktion eingebaut, mit der die Dauer der Animation etwas variiert, sodass nicht alle Counter gleichzeitig fertig sind.

<h2 class="countup mb-0">300</h2>

<script>
    jQuery(document).ready(function($) {

        $.fn.isInViewport = function () {
            var elementTop = $(this).offset().top;
            var elementBottom = elementTop + $(this).outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();
            return elementBottom > viewportTop && elementTop < viewportBottom;
        };
        var i = 0;
    
        if($('.countup').length > 0){
    
        $(window).on('resize scroll', function () {
            if ($('.countup').isInViewport()) {
                i++;
                if (i == 1) {
                    $('.countup').each(function () {
    
                        var randomtime = Math.floor(Math.random() * 2000) + 4000;
                        
                        $(this).prop('counter', 0).animate({
                            counter: $(this).text()
                        }, {
                            duration: randomtime,
                            easing: 'swing',
                            step: function (now) {
                                $(this).text(Math.ceil(now));
                            }
                        });
                    });
                }
            }
        });
        }
    });
</script>Code-Sprache: HTML, XML (xml)