Creați un fundal animat cu HTML și CSS

de
Tweet
Share
Share
Pin

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 `

` cu clasa „wrapper”, elementul de bază care va găzdui întreaga animație.

Apoi, creăm zece elemente `

`, fiecare reprezentând o bulă. În interiorul fiecărui `

`, adăugăm un element `` cu clasa „dot”. Dacă ești nou în HTML, aceste etichete esențiale pot fi învățate rapid, în aproximativ 10 minute.
 <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 `

` care vor servi drept bule animate. Fiecare `

` primește o înălțime, o lățime, o bordură și o rază de bordură mare, pentru a crea forma circulară. De asemenea, definim durata animației folosind proprietatea `animation`.
 .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 `

` părinte.

 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 `

`. Vom da nume animației – „animate” – pe care o vom defini mai târziu cu ajutorul `@keyframes`.

Reține că `nth-child(2)` vizează primul `

`, deoarece primul element copil al `.wrapper` este `h1`.

 .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 `

` inferioare procente mai mari, pentru ca acestea să se ridice la intervale diferite.

 .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.