Vacatures aan de waslijn New
Job cards hang with pegs from a sagging clothesline and flutter in a wind that never repeats exactly; move your mouse or finger over the line and you give a gust in that direction. Each card is an ordinary link (also with Tab, which gives it a nudge). For the careers page of a bakery, daycare or garden centre. With reduced motion they hang still.
Bakkerij Van Dam zoekt handen
Vier plekken in Leiden. Tik een kaartje voor de vacature.
How to use it
- Paste the HTML where the components 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.
<!-- Vacatures aan de waslijn · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="fyw">
<svg class="fyw__lijn" aria-hidden="true"><path d=""/></svg>
<ul class="fyw__rij">
<li class="fyw__k"><a class="fyw__a" href="#fy-waslijn"><span class="fyw__kn" aria-hidden="true"></span><b>Bakker</b><span>32 uur, vroeg</span></a></li>
<li class="fyw__k"><a class="fyw__a" href="#fy-waslijn"><span class="fyw__kn" aria-hidden="true"></span><b>Verkoop</b><span>zaterdag</span></a></li>
<li class="fyw__k"><a class="fyw__a" href="#fy-waslijn"><span class="fyw__kn" aria-hidden="true"></span><b>Bezorger</b><span>op e-bike</span></a></li>
<li class="fyw__k"><a class="fyw__a" href="#fy-waslijn"><span class="fyw__kn" aria-hidden="true"></span><b>Stagiair</b><span>bakkerij</span></a></li>
</ul>
<div class="fyw__tekst"><h3 class="fyw__h">Bakkerij Van Dam zoekt handen</h3><p class="fyw__p">Vier plekken in Leiden. Tik een kaartje voor de vacature.</p></div>
</div>
</div>/* Vacatures aan de waslijn · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.fyw{position:absolute;inset:0;overflow:hidden;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;touch-action:pan-y}
.fyw *{box-sizing:border-box}
.fyw__lijn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fyw__lijn path{fill:none;stroke:#0a0a0a;stroke-width:1.5}
.fyw__rij{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.fyw__k{position:absolute;left:0;top:0;width:78px;transform-origin:50% 0;will-change:transform}
.fyw__a{pointer-events:auto;display:flex;flex-direction:column;gap:3px;padding:14px 8px 10px;min-height:92px;background:#fff;border-radius:4px;color:#0a0a0a;text-decoration:none;box-shadow:0 8px 14px -10px rgba(10,10,10,.55);transition:background-color .16s}
.fyw__k:nth-child(2) .fyw__a{background:#F5480F}
.fyw__k:nth-child(4) .fyw__a{background:#0a0a0a;color:#fff}
.fyw__a b{font:700 14px/1.15 'Switzer',sans-serif}
.fyw__a span{font:400 12px/1.25 'Switzer',sans-serif}
.fyw__a:hover{background:#fff1ea}
.fyw__k:nth-child(2) .fyw__a:hover{background:#ff6a36}
.fyw__k:nth-child(4) .fyw__a:hover{background:#2a2a2a}
.fyw__a:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.fyw__k:nth-child(4) .fyw__a:focus-visible{outline-color:#F5480F}
.fyw__kn{position:absolute;left:50%;top:-7px;width:8px;height:16px;margin-left:-4px;border-radius:2px;background:#c9a77c;box-shadow:inset -2px 0 0 rgba(10,10,10,.18)}
.fyw__tekst{position:absolute;left:16px;right:16px;bottom:12px}
.fyw__h{margin:0;font:700 17px/1.2 'Switzer',sans-serif;letter-spacing:-.01em}
.fyw__p{margin:3px 0 0;font:400 13px/1.35 'Switzer',sans-serif;color:#3d3b37}// Vacatures aan de waslijn · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var el=root.querySelector('.fyw');if(!el)return;
var RM=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var pad=el.querySelector('.fyw__lijn path'),svg=el.querySelector('.fyw__lijn'),K=[].slice.call(el.querySelectorAll('.fyw__k'));
var FX=[.16,.39,.62,.85],RUST=[-2,1.5,-1,2],W=1,H=1,y0=20,zak=14,cw=78,raf=0,last=0,vis=true,vlaag=0,px=-1,pv=0,tijd=0;
var C=K.map(function(k,i){return{k:k,f:0,v:0,fl:0,ph:i*1.7};});
function maat(){var r=el.getBoundingClientRect();if(!r.width)return false;W=r.width;H=r.height;y0=Math.max(16,H*.12);zak=H*.07;cw=Math.min(92,(W-40)/4.4);svg.setAttribute('viewBox','0 0 '+W.toFixed(1)+' '+H.toFixed(1));K.forEach(function(k){k.style.width=cw.toFixed(1)+'px';});return true;}
function ly(x,b){var u=x/W;return y0+4*(zak+b)*u*(1-u);}
function teken(b){pad.setAttribute('d','M0 '+y0.toFixed(1)+' Q'+(W/2).toFixed(1)+' '+(y0+2*(zak+b)).toFixed(1)+' '+W.toFixed(1)+' '+y0.toFixed(1));
C.forEach(function(c,i){var x=FX[i]*W,y=ly(x,b)-2;c.k.style.transform='translate('+(x-cw/2).toFixed(1)+'px,'+y.toFixed(1)+'px) rotate('+(RM?RUST[i]:c.f*57.3+RUST[i]*.5).toFixed(2)+'deg) skewY('+(RM?0:c.fl).toFixed(2)+'deg)';});}
function tick(t){if(!vis){raf=0;return;}var dt=Math.min(.033,(t-last)/1000);last=t;tijd+=dt;vlaag*=Math.pow(.25,dt);
var b=Math.sin(tijd*1.6)*1.2+Math.abs(vlaag)*.02;
C.forEach(function(c,i){var x=FX[i]*W,wind=.55*Math.sin(tijd*1.25+c.ph)+.3*Math.sin(tijd*2.9+c.ph*2.3)+.15*Math.sin(tijd*5.1+c.ph*.7),
dicht=px<0?.35:Math.exp(-Math.pow((px-x)/(W*.28),2)),f=wind*.9+vlaag*.004*(.35+dicht);
var h=dt/2;for(var s=0;s<2;s++){c.v+=(-38*c.f-2.4*c.v+f)*h;c.f+=c.v*h;}c.f=Math.max(-.6,Math.min(.6,c.f));c.fl=c.v*2.2;});
teken(b);raf=requestAnimationFrame(tick);}
function kick(){if(RM||raf)return;last=performance.now();raf=requestAnimationFrame(tick);}
el.addEventListener('pointermove',function(e){var r=el.getBoundingClientRect(),x=e.clientX-r.left;if(px>=0){var d=x-px;vlaag=Math.max(-700,Math.min(700,vlaag+d*9));}px=x;kick();});
el.addEventListener('pointerleave',function(){px=-1;});
K.forEach(function(k,i){var a=k.querySelector('a');a.addEventListener('focus',function(){C[i].v+=2.2;kick();});a.addEventListener('pointerenter',function(){C[i].v+=(i%2?1:-1)*1.2;kick();});});
if(maat())teken(0);kick();
if('ResizeObserver' in window)new ResizeObserver(function(){if(maat())teken(0);}).observe(el);
if('IntersectionObserver' in window)new IntersectionObserver(function(es){vis=es[0].isIntersecting;if(vis)kick();}).observe(el);
}
init(document.querySelector('.jouw-container'));More components
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 →