wtorek, 14 marca 2017

Tęczowa animacja tła w CSS

Element: HTML/JavaScript
Stopień trudności: xxxx
Czas wykonywania: ~20 minut
Ok, zdaje sobie sprawę, że migająca tęcza jako tło to może nie jest najlepszym pomysłem świata, ale szukajmy pozytywów. Cała instrukcja może pomóc Wam ( i mi ) stworzyć coś interaktywnego i zapoznać się z animacjami w CSS. Albo posłużyć jako inspiracja. Kto tam wie!

Oto efekt

Rainbow


Efekt jest bardzo prosty i sensowny. Niestety w tym tutorialu nie znajdziecie dokładnie omówionych podstaw animacji i keyframe w CSS, ale o tym możecie przeczytać tu i tu.

Krok 1 
Na początek musimy stworzyć element, który ma się “tęczować”, czyli prosty:
<div>
<p>Rainbow</p>
</div>

Krok 2 
Ustawiamy podstawowe wartości dla <div> w CSS.
div {
padding: 100px 50px;
color: #fff;
}
i dla h1
div>h1 {
font-family: sans-serif;
font-weight: 900;
color: #fff;
letter-spacing: 3px;
}
Nasz div na razie nie ma żadnej wartości, która mówi o koloru tła.

Krok 3 
Stwórzmy animację i nazwijmy ją “rainbow”:
@keyframes rainbow {
0% {background-color: #FF0000;}
10% {background-color: #E2571E;}
20% {background-color: #FF7F00;}
30% {background-color: #FFFF00;}
40% {background-color: #00FF00;}
50% {background-color: #96bf33;}
60% {background-color: #0000FF;}
70% {background-color: #4B0082;}
80% {background-color: #8B00FF;}
90% {background-color: #222222;}
100% {background-color: #FF0000;}
}
Procenty od 0 do 100 mówią jak będą zmieniać się kolory w trakcie animacji. W tym przypadku, gdy chcemy stworzyć tęczę potrzebujemy 10 kroków, aby to wykonać. Możliwe są również inne ustawienia kroków.
Aby przejście było delikatne, kolor czerwony jest kolorem początkowym i zamykającym.

Krok 4
Dodaj animacje do div
div {
padding: 100px 50px;
color: #fff;
animation: rainbow 5s ease-in infinite;
}
5s - odpowiada za to jak długo będzie trwać animacja;
ease-in - jest to jeden z efektów przejścia przez kolory/animację;
infinite - czyli animacja będzie się powtarzać do skutku.

Div może mnie także ustawione tło, jednak nie wpływa to na animacje. Kolor jest niewidoczny w każdym momencie animacji.

Możecie zobaczyć efekt także tutaj i spróbować się nim pobawić bez możliwości popsucia bloggera. *-*
Komentarz
Dzień dobry!
Dajcie znać co o tym sądzicie i czy macie fajny pomysł gdzie i jak można by zastosować ten efekt? W jakiej sytuacji i który element wyglądał by ciekawie? Jeśli chcielibyście bardziej złożoną instrukcję dotyczącą budowania animacji i poprawnej struktury jej kodu dajcie znać!

5 komentarzy:

  1. Jak tęczowo. :3 Superaśny efekt. ;D

    OdpowiedzUsuń
  2. KURDECZEK, REANIMACJA GT(?) <3

    OdpowiedzUsuń
  3. Skin Tonight pobrany dla bloga brak-konkretow.blogspot.com
    Pozdrawiam.

    OdpowiedzUsuń
  4. I jeszcze tu się wepchnę (bo na bilbord przydrożny nie mam wystarczających środków) z informacją, że mejlacza posłałam :P

    OdpowiedzUsuń
  5. pobrałam Tonight na zonkile-i-chryzantemy.blogspot.com

    OdpowiedzUsuń

+
Szablon wykonany przez Tyler