9 אנימציות טקסט לאתר - חיות, ומהירות (בלי תוסף)

/* CSS: veil over each word fades out in a wave */
.word::after { content:''; position:absolute; inset:0;
  background: var(--bg); transition: opacity .45s;
  transition-delay: calc(var(--i) * var(--stagger, 45ms)); }
.go .word::after { opacity: 0; }

.go .ltr { opacity:1; transform:none; }
.ltr { opacity:0; transform:translateY(0.5em);
  transition: .5s; transition-delay: calc(var(--i)*35ms); }

let n=0; timer=setInterval(()=>{
  el.textContent = full.slice(0, ++n);
  if (n>=full.length) clearInterval(timer);
}, 55); // + a CSS blinking caret

background: linear-gradient(90deg,#3BD9FF,#8B5CF6,#3BD9FF);
-webkit-background-clip: text; color: transparent;
background-size: 200%; animation: slide 5s linear infinite;

background: linear-gradient(100deg,#fff 40%,#3BD9FF 50%,#fff 60%);
-webkit-background-clip:text; color:transparent;
background-size:250%; animation: shine 3s linear infinite;

.mark { background: linear-gradient(var(--accent),var(--accent))
  no-repeat; background-size: 0% 38%; background-position: 0 88%;
  transition: background-size .7s; } .go .mark { background-size:100% 38%; }

.u::after { content:''; position:absolute;
  inset-block-end:-.1em; inset-inline:0; height:3px; background:var(--accent);
  transform:scaleX(0); transform-origin:right; transition:transform .6s; }
.go .u::after { transform:scaleX(1); }

const glyphs='אבגדהוזחט...';
timer=setInterval(()=>{ out=[...full].map((c,i)=>
  i<revealed ? c : glyphs[Math.random()*glyphs.length|0]).join('');
  el.textContent=out; revealed+=0.5; }, 55);

el.onpointermove = e => {
  const r=el.getBoundingClientRect();
  const x=(e.clientX-r.left)/r.width-.5, y=(e.clientY-r.top)/r.height-.5;
  el.style.transform=`perspective(600px)
    rotateY(${x*max}deg) rotateX(${-y*max}deg)`; };