Rust als Conversiestrategie: Waarom 2026 Luistert in Plaats van Schreeuwt

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Story Demo</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#1a1a1a;background:#fafafa}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;z-index:10}
progress{width:100%;height:4px}
main{max-width:900px;margin:0 auto;padding:48px 24px}
.hero{padding:80px 0;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-0.02em}
.card{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px;margin:32px 0;opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.card.visible{opacity:1;transform:none}
.cta{position:fixed;right:24px;bottom:24px;background:#111;color:#fff;padding:14px 18px;border-radius:999px;font-weight:600;opacity:.9;transition:transform .3s}
.cta.shift{transform:translateY(-10px)}
footer{padding:64px 24px;text-align:center;color:#666}
</style>
</head>
<body>
<header>
<div><strong>Fluister UI</strong></div>
<progress id="p" value="0" max="100"></progress>
</header>
<main>
<section class="hero">
<h1>Rust. Ritme. Resultaat.</h1>
<p>Scroll om het verhaal te onthullen.</p>
</section>
<article class="card"><h2>Waarom minder meer is</h2><p>Witruimte reduceert cognitieve belasting en verhoogt vertrouwen.</p></article>
<article class="card"><h2>Scroll als narratief</h2><p>Content verschijnt op het juiste moment, zonder pushy animaties.</p></article>
<article class="card"><h2>Contextuele actie</h2><p>De call-to-action reageert subtiel op de leesvoortgang.</p></article>
</main>
<div class="cta" id="cta">Start gesprek</div>
<footer>© Demo 2026</footer>
<script>
const cards=document.querySelectorAll('.card');
const io=new IntersectionObserver(entries=>{
entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible')}})
},{threshold:.3});
cards.forEach(c=>io.observe(c));
const p=document.getElementById('p');
const cta=document.getElementById('cta');
window.addEventListener('scroll',()=>{
const h=document.documentElement;
const sc=(h.scrollTop/(h.scrollHeight-h.clientHeight))*100;
p.value=sc;
if(sc>50) cta.classList.add('shift'); else cta.classList.remove('shift');
});
</script>
</body>
</html>