Sadržaj
Prijelazi pripadaju novoj seriji učinaka koji su ugrađeni HTML5 a to se može prilagoditi pomoću CSS3Ranije je ovu vrstu učinaka morao izvoditi Javascript pomoću jedne od brojnih dostupnih knjižnica i okvira (Mootools, Jquery itd.), Ali kada je uveden novi standard, takvi su učinci ugrađeni, poput prijelaza, animacija, transformacija …Korištenje prijelaza
Prije nego što vidimo kako koristiti prijelaz, moramo znati što je to. Znamo da kada primijenimo promjenu na svojstvo : hover kada zadržite pokazivač miša iznad elementa, on odmah preuzima stil dodijeljen kada je miš iznad njega, prijelaz nije ništa drugo do kontrola načina na koji će se ta promjena izvršiti, odnosno trajanje promjene, brzina pri koji će se provesti kako bi se postigao učinak poput mješavine između starog i novog stanja.
Tada možemo sažeti da je prijelaz prijelaz iz jednog stanja u drugo unutar HTML dokumenta i sva svojstva pomoću kojih se ta promjena može izvršiti, na sljedećoj slici vidimo početno stanje i konačno stanje, prijelaz je ono što se događa Između oboje.
POVEĆAJTESvojstva prijelaza
Pogledajmo svojstva i atribute koje možemo koristiti za prijelaz:
- prijelazno kašnjenje: Određuje odgodu u jedinici vremena nakon koje će se početi primjenjivati učinak.
- prijelazno trajanje: Određuje vrijeme tijekom kojeg će se prijelaz izvršiti.
- prijelazno svojstvo: Određuje na koje svojstvo će se prijelaz primijeniti.
- funkcija prijelaza-vremena: Određuje način na koji će se srednje vrijednosti tretirati tijekom izvođenja prijelaza.
- tranzicija: To je prečac s kojim možemo primijeniti sva svojstva prijelaza u jednoj CSS deklaraciji. Može se sažeti na sljedeći način: prijelaz:
Pogledajmo primjer kako napraviti prijelaz za element u HTML5, pogledajmo sljedeći kod:
PrimjerPostoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.
Kao što vidimo implementirali smo različita svojstva prijelaznog elementa pomoću prefiksa -webkit, to nas uvjerava da će biti ispunjeno za preglednike Krom Y Safari, kako bi ih implementirali za Firefox Y Opera moramo uključiti i prefikse -moz i -o.
Također možemo primijetiti da smo postavili odgoditi u 100 ms što znači da će imati malo kašnjenja prije početka prijelaza, tada bi cijelo trajanje učinka trebalo trajati 500 ms što je utvrđeno u trajanje.
Pogledajmo sliku sa svim fazama učinka:
POVEĆAJTEKao što vidimo, prijelaz čini da se učinak postupno primjenjuje tijekom navedenog vremena.
Ovime dovršavamo vodič o tome kako primijeniti učinak prijelaza na element u HTML5, moramo nastaviti vježbati sve dok ne postane prirodno postaviti traženi kôd kako bi naši dokumenti i stranice postigli veću dinamiku.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
