Dodavanje animirane pozadine vašem veb sajtu ili aplikaciji može značajno doprineti jedinstvenom i privlačnom dizajnu. Kreativne pozadine imaju moć da izazovu emocije i poboljšaju celokupno korisničko iskustvo.
Postoji mnogo načina da kreirate animiranu pozadinu za vašu aplikaciju, ali jednostavna kombinacija HTML-a i CSS-a se pokazala kao posebno efikasna. U nastavku ćemo detaljno analizirati primer, korak po korak objasniti kako kod funkcioniše i omogućiti vam da vidite demonstraciju uživo finalne animirane pozadine.
Kreiranje HTML strukture
Zamisao je da napravimo pozadinu plave boje sa mehurićima koji rastu i lagano se kreću prema gore. Krajnji rezultat možete videti na CodePen.
Počinjemo kreiranjem sekcije sa omotačem klase, koja će služiti kao kontejner za animaciju.
Zatim ćemo kreirati 10 div elemenata, koji će predstavljati mehuriće. Unutar svakog div-a, postavićemo span element sa klasom „dot“. Ove osnove HTML oznake možete savladati za samo 10 minuta, ako ste novi u HTML-u.
<body>
<section class="wrapper">
<h1>Animirana pozadina</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>
Stilizovanje pomoću CSS koda
Možete postići neverovatne efekte pozadine koristeći samo HTML, ali u ovom projektu ćemo upotrebiti CSS za stilizovanje i animiranje pozadine.
Prvo, postavljamo margine i padding na 0, kako bismo osigurali da nema razmaka oko pozadine.
* {
margin: 0;
padding: 0;
}
Zatim stilizujemo roditeljsku sekciju koristeći klasu „wrapper“. Ova sekcija će zauzimati 100% širine i visine, popunjavajući celu stranicu. Pozadinsku boju postavljamo na nijansu plave i dajemo joj apsolutnu poziciju.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Stilizujemo i h1 element sa apsolutnom pozicijom. Da bismo ga postavili u centar stranice, prvo postavljamo njegovu gornju i levu poziciju na 50%. Zatim koristimo „translate“ da ga pomerimo gore i levo, tako da mu centar bude tačno u sredini.
.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;
}
Sada stilizujemo div elemente koji će izgledati kao kružni, animirani mehurići. Svakom div-u dodeljujemo visinu, širinu i ivicu. Veliki poluprečnik ivice osigurava da je ivica kružna. Takođe, postavljamo trajanje animacije koristeći CSS animaciono svojstvo.
.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;
}
Stilizujemo tačke (span elemente) visinom i širinom od 5 piksela. Dajemo im kružni poluprečnik ivice i belu pozadinu. Svaku od tačaka postavljamo apsolutno, blizu gornjeg desnog ugla odgovarajućeg roditeljskog div-a.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Sada, koristeći „nth-child“ selektor, pozicioniramo svaki div sa različitim postavkama. Animaciju ćemo nazvati „animate“, a definisaćemo je kasnije koristeći „@keyframes“.
Koristimo „nth-child(2)“ da adresiramo prvi div, jer je prvo dete elementa „.wrapper“ h1 element.
.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;
}
Nižim div elementima dajemo veće procente kako bi se kretali ka vrhu u različitim intervalima.
.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;
}
Koristimo „@keyframes“ za postepeno menjanje i rotiranje krugova i tačaka u različitim vremenskim intervalima. U sledećem kodu, tačke se rotiraju za 70 stepeni, a krugovi za 360. Ova rotacija stvara efekat mehurića.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Pozadinu možete učiniti modernijom koristeći CSS obrasce. Obrasci vam omogućavaju kreiranje talasa, mreža, listova i drugih dezena koji vam mogu pomoći da kreirate neverovatne animacije.
Možete animirati brojna svojstva koristeći CSS
Možete kreirati različite vrste animacija koristeći CSS. To uključuje promenu boje pozadine i odlaganje vremena izvođenja animacije.
Takođe možete podesiti koliko često animacija treba da se pokreće, čak i do beskonačnosti. Možete podesiti i smer kretanja animacije: napred ili unazad. Zabavno je eksperimentisati sa animacijama i možete ih koristiti da oživite svoje aplikacije.