baueradvance/httpdocs/templates/bauer/rsce_statistics.html5

<?php $GLOBALS['TL_BODY'][] = "<script>
	var section = document.querySelector('.numbers');
	var hasEntered = false;

	window.addEventListener('scroll', (e) => {
		var shouldAnimate = (window.scrollY + window.innerHeight) >= section.offsetTop;

		if (shouldAnimate && !hasEntered) {
			hasEntered = true;

			$('.value').each(function () {
				$(this).prop('Counter',0).animate({
					Counter: $(this).attr('data-number')
				}, {
					duration: 3000,
					easing: 'swing',
					step: function (now) {
						var num = Math.ceil(this.Counter).toString();
						if(Number(num) > 999){
							while (/(\d+)(\d{3})/.test(num)) {
								num = num.replace(/(\d+)(\d{3})/, '$1' + '.' + '$2');
							}
						}
						$(this).text(num);
					}
				});
			});
		}
	});
</script>" ?>

<div class="<?php echo $this->class ?> block" <?php echo $this->cssID ?>>
	<div class="numbers row">
		<div class="number-item col-6 text-center">
			<span class="value" data-number="<?= $this->ausgabe ?>">0</span>
			<span class="text">Leser/Ausgabe <sup>1</sup></span>
		</div>
		<div class="number-item col-6 text-center">
			<span class="value" data-number="<?= $this->user ?>">0</span>
			<span class="text">Unique User <sup>2</sup></span>
		</div>
		<div class="number-item col-6 text-center">
			<span class="value" data-number="<?= $this->auflage ?>">0</span>
			<span class="text">verkaufte Auflage pro Jahr gesamt <sup>3</sup></span>
		</div>
		<div class="number-item col-6 text-center">
			<span class="value" data-number="<?= $this->visits ?>">0</span>
			<span class="text">Visits <sup>4</sup></span>
		</div>
	</div>
	<div class="btn">
		<a href="<?php echo $this->link ?>">Mehr erfahren</a>
	</div>
	<div class="source">Quellen: <?php echo $this->text ?></div>
</div>