Counters section animated

V000-52

Met deze preset kan je gemakkelijk belangrijke statistieken weergeven met een oplopende animatie. 

Hoe te gebruiken?

Kopieer onderstaande HTML, CSS en Javascript in je template. Vergeet daarnaast niet de Anime.js library in te laden via de config.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<section class="py-5 counters-section">
	<div class="container">
		<nc-preset-list name="counters-list" columns-xs="6" columns-md="3" columns="4" layout-button="Teller toevoegen">
			<div class="count-block">
				<nc-element name="count-{%name%}" attributes="class=count-block-number" default="1000"></nc-element>
				<nc-text name="count-text-{%name%}" attributes="class=count-block-text"></nc-text>
			</div>
		</nc-preset-list>
	</div>
</section>
CSS
@media only screen and (min-width: 768px) {
	.counters-section div[data-partial="preset-list"] .row {
		justify-content: space-around;
	}
}

.counters-section .count-block .count-block-number {
	font-size: 30px;
	font-weight: bold;
	color: var(--tertiary);
	margin-bottom: 0.5rem;
	line-height: 1;
}

@media only screen and (min-width: 992px) {
	.counters-section .count-block .count-block-number {
		font-size: 50px;
	}
}

.counters-section .count-block-text p strong {
	color: var(--primary);
	font-size: 100%;
}

.counters-section .count-block-text p {
	color: var(--primary-light);
	line-height: 1.25;
	border-left: 2px solid var(--tertiary);
	padding-left: 0.5rem;
}
JS
onComplete(function () {
	const COUNT_ANIMATION_DURATION = 2000

	const observer = new IntersectionObserver((entries, observer) => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				// Stop observing the element after the animation has started.
				observer.unobserve(entry.target)

				const counterElement = entry.target.querySelector('.count-block-number')
				if (counterElement) {
					const targetNumber = parseInt(
						counterElement.textContent,
						10,
					)

					const count = {
						value: 0,
					}
					anime({
						targets: count,
						value: targetNumber,
						easing: 'easeInOutSine',
						duration: COUNT_ANIMATION_DURATION,
						update: () => {
							counterElement.textContent = Math.round(count.value)
						}
					})
				}
			}
		})
	}, {
		// Offset how far the element needs to be on screen before it triggers the animation.
		rootMargin: '0px 0px -32px 0px',
	})

	Array.from(
		document.querySelectorAll('.counters-section .count-block')
	).forEach(element => {
		observer.observe(element)
	})
});