Warsztaty Webowe grupa średniozaawansowana
Na hub.selacode pojawił się w menu link do arkusza z punktami. Za każdą pracę domową są 2 punkty do zdobycia (w poprzedniej można było akurat wyjątkowo 3 zdobyć, jeśli plik php dobrze działał, jeśli praca domowa będzie za więcej niż 2 to będzie w niej zawsze taka informacja). Każde 8 pkt z pracy domowej to 1 dodatkowy punkt do projektu (projekt będzie za 40 pkt). Niedużo, ale może się przydać na koniec.
Właściwość transition pozwala nam utworzyć pewien efekt animacji. Wspomniana animacja będzie prezentować zmianę wartości określonych właściwości CSS dla danego elementu. W efekcie tym zobaczymy przejście jednych wartości właściwości CSS w drugie, dlatego efekt transition możemy nazywać również efektem przejścia.
Przeanalizuj kody źródłowe:
Nr 1:
div {
width: 50%;
height: 100px;
background-color: #fff;
border: 5px solid #000;
}
div:hover {
width: 80%;
background-color: blue;
}
Nr 2:
div {
width: 50%;
height: 100px;
background-color: #fff;
border: 5px solid #000;
transition-duration: 5s;
}
div:hover {
width: 80%;
background-color: blue;
}
Przeanalizuj poniższe kody źródłowe i powiedz, do czego służą użyte w nich właściwości związane z efektem przejścia.
Kod nr 1:
div {
width: 50%;
height: 100px;
background-color: #fff;
border: 5px solid #000;
transition-duration: 5s;
transition-property: background-color;
}
div:hover {
width: 80%;
background-color: blue;
}
Kod nr 2:
div {
width: 50%;
height: 100px;
background-color: #fff;
border: 5px solid #000;
transition-duration: 5s;
transition-timing-function: linear;
}
div:hover {
width: 80%;
background-color: blue;
}
Kod nr 3:
div {
width: 50%;
height: 100px;
background-color: #fff;
border: 5px solid #000;
transition-duration: 5s;
transition-delay: 500ms;
}
div:hover {
width: 80%;
background-color: blue;
}
Kod nr 4:
div {
width: 50%;
height: 100px;
background-color: #fff;
border: 5px solid #000;
transition-property: width, background-color;
transition-duration: 1s, 3s;
transition-timing-function: linear, ease-in;
transition-delay: 3s, 0s;
}
div:hover {
width: 80%;
background-color: blue;
}
Kod nr 5:
div {
width: 50%;
height: 100px;
background-color: #fff;
border: 5px solid #000;
transition: width 1s linear 3s, background-color 3s ease-in 0s;
}
div:hover {
width: 80%;
background-color: blue;
}
.button{
background-color: lightblue;
width: 80px;
height: 20px;
padding: 10px;
text-align: center;
transition-duration: 2s;
}
.button:hover{
background-color: blue;
}
Dzięki pseudoelementowi hover efekt przejścia uaktywni się dopiero gdy najedziemy na dany element, dzięki niemu element płynnie zmienia kolor
Do prostych animacji wcale nie musimy uczyś się języka JavaScript, czy używać GIFów. Zwykły CSS oferuje nam kilka ciekawych rozwiązań, dzięki któym możemy ciekawie udekorować naszą stronę.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
Keyframes ustala nam jak element będzie się zmieniał w czasie. Na powyższym przykładzie widzimy, że tło elementu będzie się zmieniało z czerwonego na żółte. Spróbujmy stworzyć sobie element div. Najpierw kod css
div{
width: 100px;
height: 100px;
background-color: red;
animation: example 5s infinite;
}
Jak łatwo się było domyślić animacja polega na tym, że obrazek w ciągu 5 sekund zmienia kolor z czerwonego na żółty. Infinite, oznacza, że animacja będzie przebiegać bez przerwy. Element animation możemy rozbić na kilka mniejszych np:
| animation-name: | nazwa animacji (z @keyframes) |
|---|---|
| animation-duration: | czas (w sekundach) trwania animacji |
| animation-delay: | "opóźnienie" animacji (w sekundach), czyli czas od wczytania strony po którym animacja się rozpocznie |
| animation-iteration-count: | ile razy animacja się wykona (wartość infinite sprawi, że będzie się wykonywać bez przerwy) |
| animation-direction: |
|
| animation-timing-function: |
|
| animation-fill-mode: |
|
| animation-play-state: |
|
W pierwszym przykładzie użyliśmy from i to aby określić jakie style przyjmuje animowany obiekt w czasie trwania animacji. Są również inne sposoby, aby to zrobić np. jeśli mamy więcej niż dwie
@keyframes example {
0% {background-color: red;}
40% {background-color: blue;}
87% {background-color: green;}
100% {background-color: yellow;}
}
Jak widzimy kolory płynnie się zmieniają w czasie przebiegu animacji. Możemy sterować wartościami procentowymi i ilością różnych przejść
Ciekawa własność o której warto wiedzieć. Temat raczej jako ciekawostka więc odsyłam do dosyć treściwego artykułu na ten temat
Tutaj znajdziecie link do kodu html generującego trochę bardziej rozbudowaną animację (animacja.html)
Isnieją oczywiście programy, które ułatwiają pracę z animacjami. Jednym z takich narzędzi jest strona animista.net. Dzięki niej można w prost sposób stworzyć ciekawą animację i jej efekt wkleić do swojego kodu css. Posiada on zdecydowanie większe możliwości niż te które możemy uzyskać pisząc sami animacje, niemniej warto wiedzieć ja je tworzyć, aby w razie potrzeby potrafić edytować samemu kod, któy tworzy animista.
Wykonaj drugą fazę tworzenia projektu - zbudowanie szkieletu aplikacji w HTML5. Każda większa zmiana powinna być wysłana jako osobny commit na repozytorium utworzone w pierwszej fazie. Czas na wykonanie zadania to dwa tygodnie. Katalog w którym będzie projekt proszę nazwać PROJEKT. Prosze pamiętać, aby główny plik nazywał się index.html
Poszukaj informacji na temat właściwości transform i używając jej stwórz prosty preloader:
Utwórz katalog o nazwie ZAJ2 a w nim utwórz pliki prdom.html i prdom.css, w których umieścisz rozwiązanie tego zadania.