Teaser 1
Een hele mooie tekst die ook best lang is
Een mooie USP
Een mooie USP
Een mooie USP
Een mooie USP
Een mooie USP
Een mooie USP
Meer dan 20 jaar ervaring
Meer dan 20 jaar ervaring
Meer dan 20 jaar ervaring
-
Code
@keyframes scrollLeft {
0% {
transform: translateX(-100%); }
100% {
transform: translateX(0%); }
}@keyframes scrollLeft2 {
0% {
transform: translateX(-200%); }
100% {
transform: translateX(0%); }
}#m3374.gallery .slides .slide {
animation: scrollLeft linear infinite 35s;
}@media (max-width: 767px) {
#m3374.gallery .slides .slide {
animation: scrollLeft2 linear infinite 15s;
}
}#r3094c.container {
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}@media (min-width: 1025px) {
#m3374.gallery .slides .slide ul:last-of-type {
padding-right: 100px;
}
}
780.879
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Nulla facilisi nullam vehicula.
24.344
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Nulla facilisi nullam vehicula.
7.823
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Nulla facilisi nullam vehicula.
-
Code
<script>
function animateValue(id, start, end, duration) {
const obj = document.querySelector(id);
const range = end - start;
const steps = 60;
const increment = range / steps;
const stepTime = duration / steps;
let current = start;
let stepCount = 0;const timer = setInterval(() => {
current += increment;
stepCount++;
obj.textContent = Math.floor(current).toLocaleString('nl-NL');
if (stepCount >= steps) {
obj.textContent = Math.floor(end).toLocaleString('nl-NL');
clearInterval(timer);
}
}, stepTime);
}// Observer die de animatie activeert bij scrollen
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = entry.target;
if (target.id === "m1217") {
animateValue("#m1217 > p", 0, 780879, 700);
} else if (target.id === "m1840") {
animateValue("#m1840 > p", 0, 24344, 700);
} else if (target.id === "m4858") {
animateValue("#m4858 > p", 0, 7823, 700);
}
obs.unobserve(target); // Start slechts één keer
}
});
}, { threshold: 0.8 }); // Pas starten als 60% in beeld is// Start observer
document.addEventListener("DOMContentLoaded", function() {
observer.observe(document.querySelector("#m1217"));
observer.observe(document.querySelector("#m1840"));
observer.observe(document.querySelector("#m4858"));
});
</script>
Teaser 2
Teaser 3
Elegant atmosphere
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Nulla facilisi nullam vehicula.
Sophisticated menu
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Nulla facilisi nullam vehicula.
Award winners
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Nulla facilisi nullam vehicula.
Video & Photography
Ut enim ad minim veniam, quis exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi.
Typ hier tekst
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et ex venenatis, sagittis risus ut, dapibus enim. Nullam et fringilla lacus. Donec vitae dignissim nunc, sed consectetur nisi. Proin auctor lorem non pulvinar consequat. Vivamus feugiat metus nec tellus pulvinar tincidunt. Mauris luctus maximus convallis. Donec tincidunt nec ligula sit amet cursus. Aliquam sed risus enim. Etiam eget iaculis diam. Morbi pharetra lacinia dolor eget gravida. Aenean euismod placerat felis, vel aliquam mi pharetra sed. In hac habitasse platea dictumst.
Typ hier tekst
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et ex venenatis, sagittis risus ut, dapibus enim. Nullam et fringilla lacus. Donec vitae dignissim nunc, sed consectetur nisi. Proin auctor lorem non pulvinar consequat. Vivamus feugiat metus nec tellus pulvinar tincidunt. Mauris luctus maximus convallis. Donec tincidunt nec ligula sit amet cursus. Aliquam sed risus enim. Etiam eget iaculis diam. Morbi pharetra lacinia dolor eget gravida. Aenean euismod placerat felis, vel aliquam mi pharetra sed. In hac habitasse platea dictumst.
Typ hier tekst
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et ex venenatis, sagittis risus ut, dapibus enim. Nullam et fringilla lacus. Donec vitae dignissim nunc, sed consectetur nisi. Proin auctor lorem non pulvinar consequat. Vivamus feugiat metus nec tellus pulvinar tincidunt. Mauris luctus maximus convallis. Donec tincidunt nec ligula sit amet cursus. Aliquam sed risus enim. Etiam eget iaculis diam. Morbi pharetra lacinia dolor eget gravida. Aenean euismod placerat felis, vel aliquam mi pharetra sed. In hac habitasse platea dictumst.
Typ hier tekst
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et ex venenatis, sagittis risus ut, dapibus enim. Nullam et fringilla lacus. Donec vitae dignissim nunc, sed consectetur nisi. Proin auctor lorem non pulvinar consequat. Vivamus feugiat metus nec tellus pulvinar tincidunt. Mauris luctus maximus convallis. Donec tincidunt nec ligula sit amet cursus. Aliquam sed risus enim. Etiam eget iaculis diam. Morbi pharetra lacinia dolor eget gravida. Aenean euismod placerat felis, vel aliquam mi pharetra sed. In hac habitasse platea dictumst.