-
Code
/* Flex container for horizontal scrolling */
#m1599.gallery .slides .slide ul.pics {
display: flex;
flex-wrap: nowrap;
list-style: none;
padding: 0;
margin: 0;
animation: scrollLeft 35s linear infinite;
}/* Slide items */
#m1599.gallery .slides .slide ul.pics li {
flex: 0 0 auto;
margin-right: 30px; /* ruimte tussen items */
}@keyframes scrollLeft {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}/* Sneller scrollen op mobiel met andere afstand */
@media (max-width: 767px) {
#m1599.gallery .slides .slide ul.pics {
animation: scrollLeft2 15s linear infinite;
}
}@keyframes scrollLeft2 {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-200%);
}
}/* Voorkom wrapping van container */
#r1234 .container {
flex-wrap: nowrap;
overflow: hidden;
}
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 === "m1573") {
animateValue("#m1573 > p", 0, 780879, 700);
} else if (target.id === "m4659") {
animateValue("#m4659 > p", 0, 24344, 700);
} else if (target.id === "m3168") {
animateValue("#m3168 > p", 0, 7823, 700);
}
obs.unobserve(target); // Start slechts één keer
}
});
}, { threshold: 0.8 }); // Pas starten als 80% in beeld is// Start observer
document.addEventListener("DOMContentLoaded", function() {
observer.observe(document.querySelector("#m1573"));
observer.observe(document.querySelector("#m4659"));
observer.observe(document.querySelector("#m3168"));
});
</script>
-
Code
<script>document.addEventListener("DOMContentLoaded", function () {
const block = document.getElementById("c3901");// Zoom-in effect bij hover
block.addEventListener("mouseover", function () {
block.style.backgroundSize = "120%"; // Zoom in
block.style.transition = "background-size 0.5s ease"; // Vloeiende overgang
});// Zoom-out effect bij hover verlaten
block.addEventListener("mouseout", function () {
block.style.backgroundSize = "100%"; // Terug naar originele grootte
});// Redirect bij klikken
block.addEventListener("click", function () {
window.location.href = "/diensten"; // Doorsturen naar de gewenste pagina
});
});</script>
<style>
#c3901:hover {
cursor: pointer;
}
</style>
Video & Photography
Video & Photography
Video & Photography
-
Code
<style>.image-container {
overflow: hidden; /* Verhindert dat de afbeelding buiten het kader groeit */
border-radius: 30px; /* Houdt de afgeronde hoeken netjes */
position: relative;
}.image-container img {
width: 100%; /* Zorgt dat de afbeelding netjes in het kader blijft */
transition: transform 0.5s ease;
}.image-container:hover img {
transform: scale(1.2); /* Zorgt voor het zoom-effect */
}/* Hoofdcontainer (Kolom) */
#c3799, #c1514, #c1377, #c4921, #c4960, #c1821 {
position: relative;
overflow: hidden;
border-radius: 30px;
}/* Afbeeldingen binnen de kolommen */
.imageModuleWrap img {
width: 100%;
display: block;
transition: transform 0.5s ease-in-out !important;
border-radius: 10px;
}/* Hover zoom effect op afbeeldingen */
#c3799:hover .imageModuleWrap img,
#c1514:hover .imageModuleWrap img,
#c1377:hover .imageModuleWrap img,
#c4921:hover .imageModuleWrap img,
#c4960:hover .imageModuleWrap img,
#c1821:hover .imageModuleWrap img {
transform: scale(1.2);
clip-path: inset(0 0 0 0 round 10px);
}/* Tekst-overlay blijft zichtbaar bovenop afbeelding */
#c3799 .module.text,
#c1514 .module.text,
#c1377 .module.text,
#c4921 .module.text,
#c4960 .module.text,
#c1821 .module.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: white;
font-weight: bold;
text-align: center;
padding: 15px;
z-index: 3;
}/* Cursor effect op hover */
.imageModuleWrap img:hover {
cursor: pointer;
}</style>