Wprowadzenie animowanego tła do Twojej strony internetowej lub aplikacji to świetny sposób, aby nadać jej unikalny i intrygujący charakter. Pomysłowe tła mogą wywołać określone emocje i znacząco podnieść komfort użytkowania.
Istnieje wiele metod tworzenia animowanych teł, jednak połączenie standardowego HTML i CSS okazuje się wyjątkowo skuteczne. Zapoznaj się z przedstawionym przykładem, aby zrozumieć działanie kodu i zobaczyć na żywo demonstrację finalnego animowanego tła.
Struktura HTML – Krok po Kroku
Naszym celem jest stworzenie niebieskiego tła z bąbelkami, które powiększają się i unoszą ku górze. Efekt końcowy możesz podziwiać, klikając tutaj.
Zacznij od utworzenia sekcji z klasą „wrapper”, która będzie kontenerem naszej animacji.
Następnie, stwórz dziesięć elementów div, które będą reprezentować bąbelki. W każdym z tych elementów umieść span z klasą „dot”. Jeśli nie jesteś zaznajomiony z HTML, w zaledwie 10 minut możesz nauczyć się podstawowych znaczników.
<body>
<section class="wrapper">
<h1>Animowane Tło</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>
Stylizacja z CSS
Chociaż można tworzyć interesujące efekty tła za pomocą samego HTML, w naszym projekcie CSS będzie kluczowy dla stylizacji i animacji tła.
Na początek, wyzeruj margines i dopełnienie, aby upewnić się, że tło będzie przylegać do krawędzi ekranu.
* {
margin: 0;
padding: 0;
}
Następnie, nadaj styl sekcji nadrzędnej przy użyciu klasy „wrapper”. Sekcja ta powinna zajmować 100% szerokości i wysokości ekranu. Ustaw kolor tła na odcień niebieskiego i nadaj jej pozycję absolutną.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Element H1 również stylizujemy za pomocą absolutnej pozycji. Aby umieścić go na środku strony, najpierw ustawiamy jego lewą górną pozycję na 50%. Następnie używamy transformacji, aby przesunąć go o połowę jego szerokości i wysokości, tak aby jego środek znalazł się idealnie na środku.
.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;
}
Przechodząc do elementów div, które będą pełnić rolę animowanych bąbelków, nadajemy im okrągły kształt, ustawiając wysokość, szerokość i obramowanie. Duży promień obramowania tworzy kształt koła. Dodatkowo, określamy czas trwania animacji za pomocą właściwości animacji CSS.
.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;
}
Stylizujemy również kropki, które będą miały 5 pikseli wysokości i szerokości. Nadajemy im zaokrąglone krawędzie i białe tło. Każda z nich jest umieszczona absolutnie, w prawym górnym rogu swojego elementu nadrzędnego (div).
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Następnie, używając selektora „:nth-child”, przypisujemy różnym elementom div unikalne ustawienia. Animację nazwiemy „animate”, a definicję podamy później za pomocą „@keyframes”.
Używamy „:nth-child(2)”, aby odwołać się do pierwszego div-a, ponieważ element h1 jest pierwszym dzieckiem .wrapper.
.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;
}
Ustawiając niższym div-om wyższe wartości procentowe, sprawimy, że będą one wznosiły się do góry w różnym tempie.
.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;
}
Używamy „@keyframes” do płynnej zmiany rozmiaru i obrotu okręgów oraz kropek. W podanym kodzie, kropki obracają się o 70 stopni, a okręgi o 360. Taki obrót stwarza wrażenie ruchu bąbelków.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Możesz dodatkowo uatrakcyjnić swoje tła, wykorzystując wzory CSS. Umożliwiają one tworzenie fal, siatek, liści i innych interesujących motywów, które wzbogacą twoje animacje.
Animacja różnorodnych właściwości za pomocą CSS
Za pomocą CSS możemy tworzyć wiele rodzajów animacji, w tym zmieniać kolor tła czy opóźniać czas trwania animacji.
Dodatkowo, masz możliwość ustawienia częstotliwości odtwarzania animacji, nawet w trybie nieskończonym. Możesz również określić kierunek ruchu animacji: do przodu lub do tyłu. Eksperymentowanie z animacjami jest bardzo satysfakcjonujące i pozwala ożywić aplikacje w niesamowity sposób.
newsblog.pl