Objectbeveiliging
Uw pand veilig ook buitenwerktijd
Betrouwbare beveiligingsoplossingen voor diverse situaties met professioneel toezicht.
-
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
<style>
:root {
--cursor-size: 90px;
--ring-thickness: 1px;
--cursor-color: #AD0003;
--cursor-bg: rgba(255,255,255,0.7);
--scale-default: 1;
--scale-hover: 1.3;
--scale-active: 0.95;
}.circle-button {
position: fixed;
bottom: 20px;
right: 20px;
width: var(--cursor-size);
height: var(--cursor-size);
z-index: 9999;
display: inline-block;
transform: scale(var(--scale-default));
transition: transform 0.25s ease;
text-decoration: none;
}
.circle-button:hover { transform: scale(var(--scale-hover)); }
.circle-button:active { transform: scale(var(--scale-active)); }.cursor__inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.cursor__bg { position: absolute; inset: 0; background: var(--cursor-bg); border-radius: 50%; backdrop-filter: blur(2px); }
.cursor__ring { position: absolute; inset: 0; border-radius: 50%; border: var(--ring-thickness) solid var(--cursor-color); opacity: .7; }.cursor__text svg {
width: 100%; height: 100%;
/* we sturen de rotatie volledig via JS */
transform-origin: center;
transform-box: fill-box;
will-change: transform;
}
.cursor__text text {
dominant-baseline: middle;
font-size: 9.5px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
fill: var(--cursor-color);
}
</style><a href="/contact" class="circle-button">
<div class="cursor__inner">
<div class="cursor__bg"></div>
<div class="cursor__ring"></div>
<div class="cursor__text" id="cursorText">
<svg id="scrollCircle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="circlePath" d="M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38,0 1,1 -76,0" />
</defs>
<text>
<textPath id="textPath" href="#circlePath"></textPath>
</text>
</svg>
</div>
</div>
</a><script>
const textPath = document.getElementById('textPath');
const DEFAULT_TEXT = '• Explore • Your • Dutch • Roots •';
function setCircleText(str) {
const minLen = 60;
let out = str.trim();
while (out.length < minLen) out += ' ' + str.trim();
textPath.textContent = out.toUpperCase();
}
setCircleText(DEFAULT_TEXT);const svgEl = document.getElementById('scrollCircle');
const circleButton = document.querySelector('.circle-button');let rotationDeg = 0;
const baseSpeedMag = 30;
let baseSign = 1;let scrollBoost = 0;
const boostPerPixel = 0.20;
const damping = 0.92;
const maxBoost = 360;let lastScrollY = window.scrollY;
let lastTs = performance.now();
let paused = false; // <-- vlag voor pauze bij hoverfunction tick(ts) {
const dt = (ts - lastTs) / 1000;
lastTs = ts;if (!paused) {
const speed = (baseSign * baseSpeedMag) + scrollBoost;
rotationDeg += speed * dt;
scrollBoost *= damping;
}svgEl.style.transform = `rotate(${rotationDeg}deg)`;
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);window.addEventListener('scroll', () => {
const delta = window.scrollY - lastScrollY;
lastScrollY = window.scrollY;
if (delta === 0 || paused) return; // geen boost als hij gepauzeerd isbaseSign = Math.sign(delta);
scrollBoost += delta * boostPerPixel;
if (scrollBoost > maxBoost) scrollBoost = maxBoost;
if (scrollBoost < -maxBoost) scrollBoost = -maxBoost;
}, { passive: true });// Hover events om rotatie te stoppen
circleButton.addEventListener('mouseenter', () => paused = true);
circleButton.addEventListener('mouseleave', () => paused = false);
</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>
Bouwplaatsbeveiliging
24/7 toezicht op materialen en mensen
Specialistische beveiliging voor bouwprojecten met continue monitoring.
Evenementenbeveiliging
Professioneel en gastvrij toezicht bij bijeenkomsten
Ervaren beveiligers voor veilige en succesvolle evenementen.
Verkeersregelaar
Vlotte doorstroming van verkeer
Gecertificeerde verkeersregelaars voor veilige situaties bij bouw en evenementen.
Parkeerbegeleiding
Professionele parkeerbegeleiding
Soepel verloop van verkeer en parkeerbeheer bij evenementen.
EM Services
Erkende opleidingen en certificering
BHV, BRL9101/BRL9102 verkeersregelaarscertificering, praktijkgericht op locatie.
Opnieuw afspelen ↻
Assistive Innovations
Beschrijving: Assistive Innovations is al ruim 30 jaar gespecialiseerd in armondersteuning, eethulpmiddelen en robotarmen.
Type project Het ontwikkelen van de marketing voor Assistive Innovations, waaronder een nieuwe website, beursdeelname en een marketingplan. Klant Assistive Innovations | www.assistive-innovations.com
SABA
Beschrijving: SABA is een innovatief productiebedrijf van lijmen & kitten gevestigd in Dinxperlo.
Type project Een greep uit mijn projecten voor SABA: – ontwikkeling corporate huisstijl en huisstijldmiddelen – positionering: missie, visie & pay-off – beurzen & events – email marketing – websiteontwikkeling voor inbound marketing – content marketing: kennis van SABA-specialisten inzetten voor leadgeneratie & klantbinding – ontwikkeling marketingstrategie en KPI's – offline drukwerk: brochures, flyers – markt- en klanttevredenheidsonderzoeken Klant SABA | www.saba-adhesives.com
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.
TType 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.
Type project Een greep uit mijn projecten voor Nathan: – vertalen organisatiestrategie naar marketingbeleid – eenduidige positionering in de markt van fabrikanten en Nathan vormgeven – bewaken en opstellen van Marketingbudget- en planning – ondersteuning van groothandels m.b.t. productacties – initieert, coördineert en realiseert marketingcampagnes en productintroducties – organiseren van beurzen en evenementen – eindverantwoordelijk voor website en online marketing – verzorgen van Enervision magazine – verhogen medewerkerbetrokkenheid Klant Nathan Group | www.nathan.nl
ETNA Coffee Technologie
Beschrijving: ETNA ontwikkelt en produceert koffiemachines voor professioneel gebruik.
Type project Een greep uit mijn projecten voor ETNA: – opzetten van een professionele marketingafdeling – samenwerken met externe partners, zoals vertaalbureaus, reclamebureau en designer – het laden en versterken van het merk ETNA Coffee Technologies in binnen- en buitenland – verantwoordelijk voor alle Marketing- en Communicatieactiviteiten – ontwikkelen van campagnes voor het introduceren van nieuwe producten – uitrollen duurzaamheidsstrategie Klant ETNA Coffee Technologies | www.etna-ct.com
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;
}