Wisselend woord
The last word of a headline cycles through a list with a short slide and blur, in a label that resizes; for several services in one line.
Wij bouwen websiteswebshopsportalenapps
Voor mkb in Rotterdam en omstreken.
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.
<!-- Wisselend woord · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-rot"><h3 class="ei-rot__h">Wij bouwen <span class="ei-rot__box"><span class="ei-rot__w is-on">websites</span><span class="ei-rot__w">webshops</span><span class="ei-rot__w">portalen</span><span class="ei-rot__w">apps</span></span></h3><p class="ei-rot__s">Voor mkb in Rotterdam en omstreken.</p></div>
</div>/* Wisselend woord · NedDev · eigen werk. */
.ei-rot{padding:0 22px}
.ei-rot__h{margin:0 0 10px;font-family:'Switzer',sans-serif;font-weight:700;font-size:clamp(24px,4.6vw,34px);letter-spacing:-.025em;color:#0a0a0a;display:flex;align-items:center;gap:.3em;flex-wrap:wrap}
.ei-rot__box{position:relative;display:inline-block;height:1.35em;background:#F5480F;color:#fff;border-radius:4px;overflow:hidden;transition:width .45s cubic-bezier(.6,0,.2,1);vertical-align:middle}
.ei-rot__w{position:absolute;left:0;top:0;padding:0 .3em;line-height:1.35em;white-space:nowrap;opacity:0;transform:translateY(100%);filter:blur(6px);transition:transform .5s cubic-bezier(.6,0,.2,1),opacity .4s,filter .5s}
.ei-rot__w.is-on{opacity:1;transform:none;filter:none}
.ei-rot__w.is-out{opacity:0;transform:translateY(-100%);filter:blur(6px)}
.ei-rot__s{margin:0;font-family:'Switzer',sans-serif;font-size:14px;color:rgba(10,10,10,.6)}
@media(prefers-reduced-motion:reduce){.ei-rot__w,.ei-rot__box{transition:none}}// Wisselend woord · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-rot'),box=w.querySelector('.ei-rot__box'),ws=[].slice.call(box.querySelectorAll('.ei-rot__w')),i=0;
function fit(){box.style.width=ws[i].offsetWidth+'px';}
fit();if(document.fonts&&document.fonts.ready)document.fonts.ready.then(fit);
setInterval(function(){if(!w.isConnected)return;var cur=ws[i];cur.classList.remove('is-on');cur.classList.add('is-out');
i=(i+1)%ws.length;var nx=ws[i];nx.classList.remove('is-out');nx.style.transition='none';nx.style.transform='translateY(100%)';void nx.offsetWidth;nx.style.transition='';nx.style.transform='';nx.classList.add('is-on');fit();
setTimeout(function(){cur.classList.remove('is-out');},550);},2300);
}
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 →