Vytvorte CSS Fade Text Animation

Blog

Toto video vás prevedie návrhom postupnej animácie textu pomocou HTML, CSS a JavaScript. Tu sme použili JavaScript na konverziu textu na jednotlivý prvok span a prvok span je štylizovaný pomocou CSS. Na dosiahnutie efektu slabnúcej animácie sa používajú tri vlastnosti, tj. Poloha, nepriehľadnosť a rozmazanie.



Prihlásiť sa na odber: https://www.youtube.com/channel/UCXDLrsqe14uFu6k96xjlF4w

Zdrojový kód



HTML

CSS Fade Text Animation.

CSS



body { background:#111; font-family:'Oswald',sans-serif; } .text-animation { color:#fff; opacity:0; } .text-animation span { position:relative; top:10px; left:10px; font-size:50px; font-weight:600; opacity:0; text-transform:uppercase; animation:fade 400ms ease-in-out forwards; } .center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } @keyframes fade { 0% { top:10px; left:10px; filter:blur(15px); opacity:0; } 50% { filter:blur(10px); opacity:0.9; } 100% { top:0px; left:0px; filter:blur(0px); opacity:1; } }

JS

var wrapper = document.getElementsByClassName('text-animation')[0]; wrapper.style.opacity='1'; wrapper.innerHTML = wrapper.textContent.replace(/./g,'$&'); var spans = wrapper.getElementsByTagName('span'); for(var i=0;i

#css #javascript #html

Vytvorte CSS Fade Text Animation

Toto video vás prevedie návrhom postupnej animácie textu pomocou HTML, CSS a JavaScript. Tu sme použili JavaScript na konverziu textu na jednotlivý prvok span a prvok span je štylizovaný pomocou CSS.