Hover-bewegingen · groeien, zweven, wiebelen, kantelen New
Four small 2D hover moves in one demo: pick grow, float, wiggle or tilt and try them on a button, an icon tile and a price tag. Each move is one transform rule in 180 to 400 ms; wiggle plays once and does not loop. Also works on keyboard focus, with reduced motion only the colour change stays. Use one per site, on the elements that deserve attention.
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.
<!-- Hover-bewegingen · groeien, zweven, wiebelen, kantelen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="h2d" data-mode="groei">
<div class="h2d__seg" role="radiogroup" aria-label="Hoverbeweging kiezen">
<label class="h2d__opt"><input type="radio" name="h2d-mode" value="groei" checked><span>Groeien</span></label>
<label class="h2d__opt"><input type="radio" name="h2d-mode" value="zweef"><span>Zweven</span></label>
<label class="h2d__opt"><input type="radio" name="h2d-mode" value="wiebel"><span>Wiebelen</span></label>
<label class="h2d__opt"><input type="radio" name="h2d-mode" value="kantel"><span>Kantelen</span></label>
</div>
<div class="h2d__row">
<a class="h2d__fx h2d__btn" href="#hv-2d-set">Offerte aanvragen</a>
<a class="h2d__fx h2d__ico" href="#hv-2d-set" aria-label="Bel de servicedesk"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.6 3.5h3l1.5 4-2 1.3a10.5 10.5 0 0 0 6.1 6.1l1.3-2 4 1.5v3a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z"/></svg></a>
<a class="h2d__fx h2d__tag" href="#hv-2d-set"><span class="h2d__tn">Cv-ketel onderhoud</span><span class="h2d__tp">€ 89</span></a>
</div>
</div>
</div>/* Hover-bewegingen · groeien, zweven, wiebelen, kantelen · NedDev · eigen werk. */
.h2d{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:16px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size}
.h2d *,.h2d *::before,.h2d *::after{box-sizing:border-box}
.h2d__seg{display:flex;padding:3px;gap:2px;background:#fff;border:1px solid #d9d6d0;border-radius:8px}
.h2d__opt{position:relative;display:block}
.h2d__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.h2d__opt span{display:block;padding:7px 11px;border-radius:4px;font:500 13px/1.1 'Switzer',sans-serif;color:#55524d;transition:background-color .16s,color .16s}
.h2d__opt input:checked+span{background:#0a0a0a;color:#fff}
.h2d__opt input:focus-visible+span{outline:2px solid #F5480F;outline-offset:2px}
.h2d__opt:hover input:not(:checked)+span{color:#0a0a0a}
.h2d__row{display:flex;align-items:center;gap:18px}
.h2d__fx{outline:none;text-decoration:none;color:#0a0a0a;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background-color .16s,color .16s}
.h2d__fx:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.h2d__btn{padding:12px 16px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 14px/1 'Switzer',sans-serif}
.h2d__btn:hover,.h2d__btn:focus-visible{background:#F5480F;color:#0a0a0a}
.h2d__ico{width:44px;height:44px;display:grid;place-items:center;background:#fff;border:1px solid #d9d6d0;border-radius:8px}
.h2d__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.h2d__ico:hover,.h2d__ico:focus-visible{color:#F5480F;border-color:#F5480F}
.h2d__tag{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:#fff;border:1px solid #d9d6d0;border-radius:4px}
.h2d__tn{font:500 12px/1.2 'Switzer',sans-serif;color:#55524d}
.h2d__tp{font:700 16px/1.1 'Switzer',sans-serif}
.h2d__tag:hover,.h2d__tag:focus-visible{border-color:#0a0a0a}
.h2d[data-mode=groei] .h2d__fx:hover,.h2d[data-mode=groei] .h2d__fx:focus-visible{transform:scale(1.06)}
.h2d[data-mode=zweef] .h2d__fx:hover,.h2d[data-mode=zweef] .h2d__fx:focus-visible{transform:translateY(-4px);box-shadow:0 10px 18px -10px rgba(10,10,10,.45)}
.h2d[data-mode=wiebel] .h2d__fx:hover,.h2d[data-mode=wiebel] .h2d__fx:focus-visible{animation:h2d-wiebel .42s ease-in-out 1}
.h2d[data-mode=kantel] .h2d__fx:hover,.h2d[data-mode=kantel] .h2d__fx:focus-visible{transform:rotate(-3deg)}
@keyframes h2d-wiebel{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}45%{transform:rotate(3deg)}70%{transform:rotate(-1.5deg)}}
@container (max-width:380px){.h2d{gap:20px}.h2d__opt span{padding:7px 7px;font-size:12px}.h2d__row{gap:12px}.h2d__btn{padding:11px 12px;font-size:13px}}
@container (max-height:220px){.h2d{gap:18px}}
@media (prefers-reduced-motion:reduce){.h2d__fx{transition:background-color .16s,color .16s,border-color .16s}.h2d .h2d__fx:hover,.h2d .h2d__fx:focus-visible{transform:none;animation:none;box-shadow:none}}// Hover-bewegingen · groeien, zweven, wiebelen, kantelen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.h2d');if(!w)return;
[].forEach.call(w.querySelectorAll('input[name="h2d-mode"]'),function(r){r.addEventListener('change',function(){if(r.checked)w.setAttribute('data-mode',r.value);});});
}
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 →