Koppen zonder weeswoord New
Shows what text-wrap: balance and pretty do: the heading spreads its words over even lines and the paragraph does not end with a single orphan word. Drag the column width and toggle it to see the difference. One line of CSS for every heading and intro on a site; unsupported browsers simply wrap as usual.
Zonnepanelen laten leggen in Haarlem en omgeving
Wij leggen uw panelen binnen drie weken na akkoord, inclusief omvormer, schouw op het dak en aanmelding bij de netbeheerder.
How to use it
- Paste the HTML where the text animations should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Koppen zonder weeswoord · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kzw">
<div class="kzw__bar">
<label class="kzw__sw"><input class="kzw__cb" type="checkbox" role="switch" checked><span class="kzw__spoor" aria-hidden="true"></span><span>Slim afbreken</span></label>
<label class="kzw__br"><span>Breedte</span><input class="kzw__range" type="range" min="50" max="100" value="80" aria-valuetext="80 procent"></label>
</div>
<div class="kzw__vak">
<div class="kzw__kol">
<h3 class="kzw__h">Zonnepanelen laten leggen in Haarlem en omgeving</h3>
<p class="kzw__p">Wij leggen uw panelen binnen drie weken na akkoord, inclusief omvormer, schouw op het dak en aanmelding bij de netbeheerder.</p>
</div>
</div>
</div>
</div>/* Koppen zonder weeswoord · NedDev · eigen werk. */
.kzw{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:12px 18px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left}
.kzw__bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kzw__sw{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:28px;font-size:12.5px;font-weight:500;cursor:pointer}
.kzw__cb{position:absolute;opacity:0;width:36px;height:24px;margin:0;left:0;cursor:pointer}
.kzw__spoor{position:relative;width:36px;height:20px;border-radius:4px;background:#cfcdc9;transition:background-color .2s}
.kzw__spoor::after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:3px;background:#fff;transition:transform .2s}
.kzw__cb:checked+.kzw__spoor{background:#0a0a0a}
.kzw__cb:checked+.kzw__spoor::after{transform:translateX(16px)}
.kzw__cb:focus-visible+.kzw__spoor{outline:2px solid #F5480F;outline-offset:2px}
.kzw__br{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500}
.kzw__range{width:96px;min-height:24px;accent-color:#F5480F}
.kzw__range:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.kzw__vak{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;padding:6px 0;border-top:1px solid rgba(10,10,10,.12)}
.kzw__kol{width:var(--b,80%);padding-right:8px;border-right:2px dashed #F5480F}
.kzw__h{margin:0 0 6px;font-size:clamp(17px,5cqw,22px);font-weight:700;line-height:1.2;letter-spacing:-.015em}
.kzw{container-type:inline-size}
.kzw__p{margin:0;font-size:12.5px;line-height:1.45;color:#3a3a3a}
.kzw:has(.kzw__cb:checked) .kzw__h{text-wrap:balance}
.kzw:has(.kzw__cb:checked) .kzw__p{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.kzw__spoor,.kzw__spoor::after{transition:none}}// Koppen zonder weeswoord · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.kzw'); if (!w) return;
const r = w.querySelector('.kzw__range'), kol = w.querySelector('.kzw__kol');
const zet = () => { kol.style.setProperty('--b', r.value + '%'); r.setAttribute('aria-valuetext', r.value + ' procent'); };
r.addEventListener('input', zet); zet();
}
init(document.querySelector('.jouw-container'));More text animations
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →