Rolling Digits Counter
Text effects @bhaskar Stars:0 Views:1
<div class="rn"><small>Card number</small><div class="nm"><span>•••• •••• ••••</span><span class="dg"></span></div><button type="button">Animate</button></div>
<style>
.rn{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.rn small{font-size:11px;color:#777;align-self:center}.nm{display:flex;gap:10px;align-items:center;font:600 20px ui-monospace,monospace;color:#999}.dg{display:flex;color:#fff}.c{height:1.3em;overflow:hidden;width:.62em}.c>div{transition:transform 1s cubic-bezier(.2,.9,.3,1)}.c b{display:block;height:1.3em;line-height:1.3em;font-weight:600;text-align:center}.rn button{margin-top:14px;background:#1b1b1b;border:1px solid #2a2a2a;color:#eee;border-radius:10px;padding:9px 16px;font:600 12px system-ui;cursor:pointer}
</style>
<script>
(function(){var R=document.querySelector(".rn"),dg=R.querySelector(".dg"),cols=[],v=[0,8,0,6];for(var i=0;i<4;i++){var c=document.createElement("span");c.className="c";var inn=document.createElement("div");for(var d=0;d<10;d++){var b=document.createElement("b");b.textContent=d;inn.appendChild(b)}c.appendChild(inn);dg.appendChild(c);cols.push(inn)}function set(n,anim){cols.forEach(function(inn,i){inn.style.transitionDelay=anim?i*90+"ms":"0ms";inn.style.transform="translateY(-"+n[i]*1.3+"em)"})}set(v,false);R.querySelector("button").onclick=function(){var n=v.map(function(o){var x;do{x=Math.floor(Math.random()*10)}while(x===o);return x});v=n;set(n,true)}})();
</script>