Každý má rád pastvu pro oči a plynulé animace CSS3. Proto s vámi dnes sdílíme náš nejnovější experiment – sbírku efektů pro odhalování tlačítek sdílení. Můžete je použít ve svém portfoliu, galeriích obrázků a dalších!
Jak se vyrábí
Většina různých transformací a efektů na ukázkách se provádí výhradně pomocí CSS, takže by se měly objevit bez chyb a zpoždění (pokud používáte moderní prohlížeč). Zde jsou některé z klíčových komponent, které umožnily tyto efekty:
- Přechod – vlastnost přechodu nastavuje dobu, po kterou mohou vlastnosti CSS postupně transformovat své hodnoty, aby se objekty HTML plynule animovaly. Ujistěte se, že se podíváte na to, co dělají vlastnosti jeho potomka (jako je „zpoždění“ a „funkce časování“) a jak je využít ve svůj prospěch.
- Transformovat – to vám umožňuje přesouvat, otáčet, škálovat a v podstatě dělat cokoli s rozměry a pozicí vašich prvků HTML. Jeho schopnosti nejsou omezeny pouze na 2D rovinu, ale fungují i ve 3D.
- Filtr – další nová funkce CSS3, která umožňuje vývojářům aplikovat na obrázky fotografické efekty, a učinit je tak černobílými, rozmazanými, sytými atd. Upozorňujeme, že tato vlastnost stále vyžaduje předponu „-webkit-“ a ve Firefoxu nefunguje.
Pro jedno z ukázek jsme také použili zábavný plugin jQuery s názvem jRumble. Vyzkoušejte to – je to úžasné!
Doufáme, že se vám naše kolekce efektů bude líbit. Podívejte se na všechna ukázka a řekněte nám, která je vaše oblíbená. Jako vždy, pokud máte nějaké návrhy, otázky nebo se s námi chcete podělit o podobné věci, zanechte komentář níže.