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!Stopień trudności: xxxx
Czas wykonywania: ~20 minut
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 {i dla h1
padding: 100px 50px;
color: #fff;
}
div>h1 {Nasz div na razie nie ma żadnej wartości, która mówi o koloru tła.
font-family: sans-serif;
font-weight: 900;
color: #fff;
letter-spacing: 3px;
}
Krok 3
Stwórzmy animację i nazwijmy ją “rainbow”:@keyframes rainbow {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.
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;}
}
Aby przejście było delikatne, kolor czerwony jest kolorem początkowym i zamykającym.
Krok 4
Dodaj animacje do divdiv {5s - odpowiada za to jak długo będzie trwać animacja;
padding: 100px 50px;
color: #fff;
animation: rainbow 5s ease-in infinite;
}
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ć!
