V CSS3 sú dva spôsoby, ako vytvoriť animáciu: CSS Transitions, ktoré nám umožňujú vytvoriť niektoré jednoduché efekty (ako je napr. :hover) alebo CSS Animations, prostredníctvom ktorých môžeme vytvárať zložitejšie efekty. Zdá sa vám, že vytvorenie peknej animácie len s použitím čistého CSS je nemožné? Od doby, čo CSS podporuje keyframes – sa môžeme priblížiť animáciam, aké sme doteraz poznali len z Adobe Flash alebo After Effect. V tomto článku si ukážeme základy animácie v CSS3. CSS Animations sú pokročilé možnosti CSS a aj napriek tomu môžeme povedať, že je podpora CSS animácii zo strany prehliadačov na celkom dobrej úrovni. CSS Animations sú podporované všetkými hlavnými prehliadačmi v ich aktuálnej verzii – pokiaľ hovoríme o desktope. Jediný prehliadač, ktorý vám bude robiť trošku starosti je Internet Explorer. Pokiaľ ide o mobilné prehliadače CSS Animations sú podporované všetkými z nich, okrem Opery Mini takže všetci, čo používajú Chrome, Firefox Mobile alebo Safari môžu sledovať CSS animácie bez problémov. Syntax CSS @keyframes Ako som už spomínal predtým CSS animácie prácujú pomocou kľúčových snímok: keyframes. Ak chcete mať iba dve fázy animácie – použíjeme kľúčové slová FROM a TO: @keyframes moving{ from { left: 100px } to { left: 300px; } } Všetko čo animácia urobí je, že presunie prvok o 200 px doprava pri načítaní stránky. Kľúčové slovo moving umiestnené za @keyframes je názov našej animácie – pomenovali sme si túto sekvenciu, takže si ju neskôr môžeme „zavolať“, aby sme ju použili v inom prvku. Ak potrebujeme vytvoriť viac kľúčových snímok, môžeme tak urobiť pomocou percenta: @keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } Pomocou tejto myšlienky môžeme vytvoriť toľko kľúčových snímok, koľko len chceme – v jednotlivých častiach sekvencie môžeme zmeniť aj iné aspekty prvku: šírku, farbu, atď. Aby sa nám kód CSS3 zobrazoval korektne vo všetkých prehliadačoch budeme musieť pridať ich prefixy: v tomto prípade budeme potrebovať -webkit- a -moz- prefix a s nimi náš kód bude vyzerať takto: @keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } @-webkit-keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } @-moz-keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } Použitie CSS animácie Naša animácie je teraz definovaná, ale v prípade načítania stránky sa nič nestane pretože sme ju ešte nepripojili na prvok / element. V prípade, že budem chcieť vytvoriť jednoduchý DIV, ktorému priradím animáciu „ moving“ a čas trvania animácie – bude to vyzerať asi takto: .animate { animation-name: moving; animation-duration: 500ms; } S týmito dvoma vlastnosťami bude naša animácia funkčná, ale bude mať dva hlavné „problémy“: animácia začne ihneď po načítaní stránky a prebehne iba raz. To môžeme vyriešiť nastavením oneskorenia animácie (animation-delay) a počtom opakovaní (animation-iteration-count). V prvom prípade sme nastavili oneskorenie animácie1500ms a v druhom sme nastavili nekonečnú slučku opakovaní: .animate { animation-name: moving; animation-duration: 500ms; animation-delay: 1500ms; animation-iteration-count: infinite; } Možnosti CSS3 sú široké a uvedené príklady sú len začiatkom toho, čo všetko sa dá s animáciou v CSS3 urobiť. A i keď sa jedná o veľmi mocný nástroj, treba myslieť na to, že Internet Explorer podporuje animácie až od verzie 10 – takže by ste mali dávať pozor, kde ich použijete vo vašom projekte. Je totiž ešte stále dosť ľudí, ktorí používajú IE9 a starší.
Modal boxy sú často používaným nástrojom v internetovom arzenále webového vývojára. Používajú sa na veľa rôznych vecí: napr. na formuláre prihlásenia / registrácie, zobrazenie reklamy alebo obrázkov / videa, prípadne na oznámenia / upozornenia pre užívate
S rastúcou rozmanitosťou veľkostí monitorov nie je praktické navrhovať jednotlivé bloky textu, ktoré zaberajú celú šírku bloku. Tradičné riešenie je rozdeliť text do stĺpcov ručne čo je veľmi časovo náročné, prípadne rozdeliť text dynamicky pomocou JavaS
pomoc ľuďom Ľubo | 09.03.2013 Bože Otče milostivý, ako sa dajú oslobodiť duše všetkých ľudí od zloby vnášanej satanovou záludnosťou? Odpovedať Re:pomoc ľuďom Božia odpoveď | 12.03.2013 Kroky falošného pekelného kráľa
Bohom odoslaný liečivý cvik do lymfatickej zvýšenej telesnej obrany. Ku urýchlenosti vašeho lymfatického obehu som odovzdal duši mojeho dávneho proroka Cayceho dobré ozdravné ranné liečivé telesné cvičenie, na ktoré svet pozemský už dávno zabudol a dostáv
Možnosti, ako si vytvoriť vlastnu mobilnu appkuMobilná aplikácia sa dnes považujú za najmocnejší marketingový nástroj.
prejsť na článok