Un fundal animat adaugă o notă de originalitate și atracție vizuală site-ului sau aplicației tale. Aceste elemente grafice dinamice pot evoca emoții și, implicit, pot îmbunătăți experiența generală a utilizatorului.
Există o multitudine de metode pentru a integra un fundal animat, însă o combinație inteligentă între HTML și CSS se dovedește a fi deosebit de eficientă. În acest material, vom explora un exemplu concret, vom diseca logica codului și vom oferi o demonstrație interactivă a fundalului animat rezultat.
Structura HTML – fundația animației
Vom crea un fundal albastru vibrant, populat cu bule care se ridică grațios. Rezultatul final poate fi vizualizat pe Codepen.
Începem prin a defini un container `
Apoi, creăm zece elemente `
<body> <section class="wrapper"> <h1>Fundal Animat</h1> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> </section> </body>
Stilizarea cu ajutorul codului CSS
Deși efectele de fundal impresionante pot fi create și doar cu HTML, în acest proiect vom folosi CSS pentru a stiliza și anima fundalul.
Primul pas constă în resetarea marginilor și a padding-ului la 0, eliminând astfel spațiile nedorite din jurul fundalului.
* { margin: 0; padding: 0; }
Următorul pas este stilizarea secțiunii părinte cu clasa „wrapper”. Această secțiune va ocupa 100% din lățimea și înălțimea ecranului. Stabilim culoarea de fundal la un albastru vibrant și poziția ca absolută.
.wrapper { height: 100%; width: 100%; background-color: #0066cc; position: absolute; }
Pentru a poziționa titlul `
` exact în centrul paginii, îi setăm poziția absolută și folosim proprietatea `transform: translate(-50%, -50%)` pentru a-l muta înapoi cu jumătate din lățimea și înălțimea sa.
.wrapper h1 { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; font-family: sans-serif; word-spacing: 2px; color: #fff; font-size: 2rem; font-weight: 900; }
Stilizăm acum elementele `
.wrapper div { height: 60px; width: 60px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 100px; position: absolute; top: 10%; left: 10%; animation: 4s linear infinite; }
Punctele `` sunt stilizate cu o înălțime și o lățime de 5 pixeli, o rază de bordură și un fundal alb. Le poziționăm absolut, în colțul dreapta-sus al containerului `
div .dot { height: 5px; width: 5px; border-radius: 50px; background: rgba(255, 255, 255, 0.5); position: absolute; top: 20%; right: 20%; }
Utilizăm selectorul `:nth-child()` pentru a aplica stiluri distincte fiecărui `
Reține că `nth-child(2)` vizează primul `
.wrapper div:nth-child(2) { top: 20%; left: 20%; animation: animate 8s linear infinite; } .wrapper div:nth-child(3) { top: 60%; left: 80%; animation: animate 10s linear infinite; } .wrapper div:nth-child(4) { top: 40%; left: 40%; animation: animate 3s linear infinite; } .wrapper div:nth-child(5) { top: 66%; left: 30%; animation: animate 7s linear infinite; } .wrapper div:nth-child(6) { top: 90%; left: 10%; animation: animate 9s linear infinite; }
Alocăm elementelor `
.wrapper div:nth-child(7) { top: 30%; left: 60%; animation: animate 5s linear infinite; } .wrapper div:nth-child(8) { top: 70%; left: 20%; animation: animate 8s linear infinite; } .wrapper div:nth-child(9) { top: 75%; left: 60%; animation: animate 10s linear infinite; } .wrapper div:nth-child(10) { top: 50%; left: 50%; animation: animate 6s linear infinite; } .wrapper div:nth-child(11) { top: 45%; left: 20%; animation: animate 10s linear infinite; }
Utilizăm `@keyframes` pentru a modifica treptat dimensiunea și rotația cercurilor și punctelor. În codul de mai jos, punctele se rotesc cu 70 de grade, iar cercurile cu 360 de grade. Această mișcare creează efectul caracteristic al bulelor.
@keyframes animate { 0% { transform: scale(0) translateY(0) rotate(70deg); } 100% { transform: scale(1.3) translateY(-100px) rotate(360deg); } }
Pentru a spori eleganța fundalurilor, putem utiliza pattern-uri CSS. Aceste modele ne oferă posibilitatea de a crea valuri, grilaje, frunze și alte structuri, ajutându-ne să construim animații unice.
Animații versatile cu CSS
CSS-ul oferă unelte puternice pentru a crea diverse tipuri de animații. Putem modifica culoarea de fundal, putem ajusta timpul de rulare al animației și putem chiar seta o întârziere pentru pornirea acesteia.
De asemenea, putem controla frecvența cu care se repetă animația, până la infinit. Direcția mișcării poate fi, de asemenea, ajustată, permitând animației să avanseze sau să se întoarcă. Experimentarea cu animațiile aduce o dimensiune interactivă și dinamică aplicațiilor noastre.