tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

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

6 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ń
  6. Cześć,
    mam problem z pewnym menu - dokładniej z zakręceniem stron. Chciałam napisać do Ciebie e-maila, ale nie mogę, mam jakiś kłopot. :(
    Napisz do mnie, proszę. sovbedlly@onet.pl

    Będę wdzięczna za pomoc.

    OdpowiedzUsuń