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>

Video & Photography

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

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>

Portfolio Purple Cow

Assistive Innovations

Beschrijving: Assistive Innovations is al ruim 30 jaar gespecialiseerd in armondersteuning, eethulpmiddelen en robotarmen.

SABA

Beschrijving: SABA is een innovatief productiebedrijf van lijmen & kitten gevestigd in Dinxperlo.

Löwenthal Advies

Type project Ontwikkeling logo, huisstijl en website – dit project laat zien dat ook fraaie resultaten te behalen zijn met een kleiner budget! Klant Löwenthal advies | www.lowenthaladvies.nl.

Nathan driven by knowledge

Beschrijving: Nathan biedt oplossingen voor verwarming, koeling en tapwaterbereiding.

ETNA Coffee Technologie

Beschrijving: ETNA ontwikkelt en produceert koffiemachines voor professioneel gebruik.

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.

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.

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.

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.

Code

@keyframes image {
0% {
transform: translateY(0vh) scale(1) rotate(0deg);
opacity: 1;
}
48% {
transform: translateY(200vh) scale(1) rotate(10deg);
opacity: 0.5;
}
100% {
transform: translateY(400vh) scale(0.8) rotate(20deg);
opacity: 0;
}
}

#m2973 {
animation: image linear both;
animation-timeline: view();
animation-range: 80vh 480vh;
}