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ć!