Efekty CSS při najetí myší na obrázek. Originální efekty vznášení pro obrázky v čistém CSS3

Nejprve pro ty, kteří se v předmětu úplně nebo vůbec neorientují, stručně vysvětlím, co to je. to různé druhy efekty (vyskakovací titulky, nápověda, plynulé přechody, transformace, rotace, zoom, offset atd.) aplikované na prvky webové stránky, když na ně najedete kurzorem myši. Tyto efekty lze implementovat pomocí různých pluginů jQuery nebo čistě.
Dnes jsem si pro obrázky vytvořené pomocí připravil velký výběr originálních efektů vznášení pomocí CSS 3, bez připojení javascriptových knihoven. Nebudu mluvit o výhodách a nevýhodách implementace hover efektů v čistém CSS3, to je jiné téma, stačí se podívat na příklady a případně použít ten, který se vám líbí na vašem webu. Všechny efekty uvedené v přehledu jsou dodávány s ukázkovým příkladem a podrobnou dokumentací se zdroji. Návody jsou většinou v buržoazii, ale vše je víceméně intuitivní.

Chci vás jen upozornit na skutečnost, že všechny tyto příklady budou správně fungovat pouze v moderních prohlížečích, které podporují vlastnosti CSS3.

Aby nenarušil celkový obraz, nezkomolil názvy efektů strojovým překladem (až na některé), originály titulů ponechal tak, jak je vývojář nazval.

Velmi zajímavý efekt při najetí myší na miniatury, použití tenkých čar v designu a typografii. Několik různých typů efektů pro vzhled titulků pro obrázky, měkké a nevtíravé 3D transformace a hladké přechody pseudoprvků. Funguje pouze v moderních prohlížečích.

iHover je působivá sbírka čistých efektů hoveru CSS3 s podporou Bootstrap 3. Sestaveno pomocí Scss CSS (soubor), snadno upravitelné pomocí proměnných. Kód je modulární, není potřeba zahrnout celý soubor. 30+ různých efektů v jednom balení. Vše je pěkně zdokumentováno a efekty se velmi snadno používají. Vše, co musíte udělat, je správně zarovnat označení HTML a propojit soubor CSS, aby fungoval.

Vytváří některé jednoduché, ale stylové efekty vznášení pro popisky obrázků. Cílem je, aby se název, jméno autora a tlačítko odkazu dramaticky zobrazily při najetí myší na miniatury. U některých efektů se používají vizuální 3D transformace.

Velmi jednoduchý přechodový efekt, bez jakýchkoli zvonků a píšťalek, zcela kulatý obraz v rámečku, promění se změnou ohniska při vznášení a je to.

Efekty při najetí na náhledy CSS3

Vývojář umístí své dílo jako příklad obrazové galerie s přechodovými efekty, když se u miniatur zobrazí anotace (titulky). Je deklarována silná podpora moderních prohlížečů, včetně IE 9+. Samozřejmě je těžké to nazvat plnohodnotnou galerií, ale efekt vzhledu podpisů je docela zajímavý.

Další sada pravidel CSS pro vytváření působivých transformačních efektů při najetí myší na absolutně kruhové miniatury. Balíček obsahuje 7 druhů přechodů CSS3, velmi podrobnou dokumentaci k nastavení a používání. Efekty jsou podporovány všemi moderními prohlížeči.

Otočení miniatur při umístění kurzoru myši

Jednoduchý efekt otáčení kulatých náhledů, když na ně najedete kurzorem myši, je zhruba stejný, jaký můžete vidět na mém blogu, v oznámeních příspěvků na hlavní stránce. Implementováno v několika řádcích kódu css.

Je-li přeloženo doslovně: "Sexuální efekt, když se vznášíte." Samozřejmě v tomto efektu si něčeho tak sexy sotva všimnete, pokud nemáte bujnou fantazii, ale efekt je svým způsobem zajímavý a stojí za pozornost.

Pět různých efektů pro obrázky. Pop-up titulky ve třech variantách, závěsy v podobě změny stupně průhlednosti a rotace s horizontálním pohybem.

4 druhy animačních efektů pro popisky obrázků, implementované výhradně pomocí CSS3. Různé polohy fade a přechodové efekty, celkem standardní výkon. Abyste pochopili, jak animace funguje, podívejte se na zdrojový kód demo stránky, žádnou samostatnou dokumentaci jsem nenašel.

Miniatury lemované galerií s různými vzhledy titulků, otočením, vyblednutím, vyskočením a dalšími. Dokumentace o používání a konfiguraci je poměrně vzácná, ale pokud opravdu chcete, můžete na to přijít.

Tento efekt nepředstavuje nic zvláštního, banální změnu jasu obrázků při vznášení, kromě toho, že jsou přidány prvky animace. Podrobnosti implementace budete muset zjistit sami rozšířením zdrojového kódu ukázky.

Další sada 10 efektů hoveru pro obrázky, různé úpravy náhledů při najetí, přiblížení, otočení, otočení, vyblednutí atd.

Různé efekty pro animaci rámečku kolem obrázků, vypadá to docela atraktivně, je tam podrobný návod, jak nastavit a používat.

Původní efekty přechodu CSS3 použité k efektivnímu zobrazení titulků miniatur při umístění ukazatele. Sada pravidel CSS obsahuje 10 různých efektů, které můžete použít samostatně různé obrázky... Efekty jsou opravdu působivé, zvláště když si uvědomíte, že se to všechno dělá pomocí CSS3. Podrobný průvodce vám pomůže zjistit, co je co.

Cílem je vytvořit SVG, který je tvarem pozadí pro nějaký druh písma a při najetí myší se změní na jiný tvar. Můžete tedy provést mnoho různých možností, v příkladu jsou zobrazeny tři typy přechodových efektů. Na používání SVG je hezké, že můžeme změnit velikost formuláře, aby se vešel do nadřazeného kontejneru.

Posuvné obrázky

Podstatou tohoto efektu je, že se obraz pohybuje nahoru a dolů a vytváří podpis. Pokud pracujete s parametry stylu, myslím, že můžete dosáhnout docela pěkných efektů, ale ve výchozím nastavení vše vypadá velmi jednoduše.

S tímto efektem je vše jednoduché, popisky k obrázkům se vysouvají vpravo nahoře nebo vlevo dole ve formě pásku s průsvitným tmavé pozadí, vše lze velmi snadno přeformátovat pomocí vlastností css.

Zajímavé řešení, miniatury jsou prezentovány ve ztmavené podobě, když na ně najedete, objeví se obrázky a na světlém pozadí vyskočí podpis.

Popisek obrázku vystupuje z rohu a rozšiřuje se diagonálně přes celou plochu obrázku.

Některá další zajímavá řešení pro implementaci vyskakovacích titulků pro miniatury obrázků. V online editoru můžete experimentovat s parametry a dosáhnout působivějších výsledků.

Kit krásné efekty při najetí na náhledy, různé typy vzhledu a provedení popisků k obrázkům. Tenké čáry v kontrastu s mírně ztmaveným pozadím vytvářejí snadno čitelné informační bloky.

Bizarní tvary a efekt přiblížení v kombinaci s efektem animace titulků k náhledům obrázků.

Nádherné efekty překrývání ikon na miniaturách v různých variantách vzhledu. V příkladu je použit symbol (+) narýsovaný v kruhu pomocí border-radius: v CSS můžete také použít font ikony, aby byl vyskakovací panel informativnější.

Příklad vytvoření efektu vizuálního snímku pro zobrazení objemových titulků k obrázkům pouze pomocí CSS3 a HTML5.

6 Popisky obrázků

6 Možnosti vzhledu vyskakovacích titulků pro obrázky při umístění kurzoru pomocí CSS3. Podrobná lekce o implementaci a konfiguraci, dostupné zdroje ke stažení.

A nakonec, abych tak řekl, nemohu nezmínit nejjednodušší způsob, jak vytvořit vyskakovací titulek pro náhled pomocí CSS3.

Služba SendPulse je marketingový nástroj pro vytvoření předplatitelské základny a přeměnu náhodných návštěvníků vašeho webu na pravidelné. SendPulse spojuje nejdůležitější funkce pro přilákání a udržení zákazníků na jedné platformě:
● e-mailové zpravodaje,
● web-push,
● SMS mailing,
● SMTP,
● zasílání zpráv ve Viberu,
● odesílání zpráv na Facebook Messenger.

Newsletter email

Pro zasílání e-mailových newsletterů můžete využít různé tarify, včetně bezplatných. Tarif zdarma má omezení: základ předplatného nepřesahující 2500.
První věcí, kterou je třeba při práci s e-mailovou službou ok začít, je vytvořit si vlastní adresář ... Nastavte název a stáhněte seznam e-mailů adresy.

SendPulse usnadňuje vytváření formuláře předplatného jako vyskakovací okno, vložené formuláře, plovoucí a pevné v určité části obrazovky. Pomocí předplatitelských formulářů si vybudujete základnu předplatitelů od nuly nebo do své základny přidáte nové adresy.
V návrháři formulářů si můžete vytvořit přesně ten formulář předplatného, který nejlépe vyhovuje vašim potřebám, a servisní tipy vám pomohou tento úkol zvládnout. Je také možné použít některý z dostupných hotových formulářů.

Při vytváření předplatitelských formulářů je povinné používat e-mail s firemní doménou. Přečtěte si jak.
Šablony zpráv vám pomůže krásně navrhnout vaše dopisy předplatitelům. Ve speciálním konstruktoru si můžete vytvořit vlastní šablonu dopisu.

autoreporty... Správci obsahu aktivně využívají automatický mailing. To pomáhá automatizovat proces zákaznických služeb. Existuje několik způsobů, jak vytvořit automatický e-mail:
● Po sobě jdoucí řada písmen... Jedná se o nejjednodušší možnost, kdy je bez ohledu na podmínky napsáno několik dopisů, které budou odeslány příjemcům v určitém pořadí. Mohou existovat vaše vlastní možnosti - série zpráv(jednoduché vlákno zpráv), speciální datum(dopisy jsou načasovány na konkrétní data), spouštěcí písmeno- dopis je odeslán v závislosti na akcích předplatitele (otevření zprávy atd.).
● Automatizace 360- zasílání e-mailů s určitými filtry a podmínkami a také při zohlednění konverzí.
● Připravené řetězy podle šablony. Můžete vytvořit řadu písmen podle dané šablony, nebo šablonu upravit a upravit tak, aby vyhovovala vašim potřebám.
A/B testování vám pomůže experimentovat s různými možnostmi odesílání série dopisů a určit nejlepší možnost pro otevření nebo kliknutí.

Odesílání oznámení push

Push-mailingy jsou předplatné v okně prohlížeče, jde o jakousi náhradu za rss-předplatné. Web-push technologie rychle vstoupily do našeho života a je již obtížné najít web, který nepoužívá push-mailing k přilákání a udržení zákazníků. Skript požadavku můžete odesílat dopisy buď ručně, nebo vytvářet automatické e-maily vytvořením série dopisů nebo sběrem dat z RSS. Druhá možnost znamená, že jakmile se na vašem webu objeví nový článek, bude vašim odběratelům automaticky zasláno upozornění s krátkým oznámením.

Novinka od OdeslatPuls- Nyní můžete své stránky zpeněžit pomocí oznámení push vložením reklam do nich. Po dosažení 10 USD se platby provádějí každé pondělí na jeden z platebních systémů - Visa / mastercard, PayPal nebo Webmoney.
Push zprávy ve službě jsou zcela zdarma. Platba se bere pouze za White Label - zásilky bez zmínky o službě SendPulse, ale pokud vám logo služby nevadí, můžete bez omezení používat push notifikace zdarma.

SMTP

Funkce SMTP chrání vaši poštu před zablokováním pomocí IP adres na seznamu povolených. Technologie kryptografických podpisů DKIM a SPF, které se používají v zásilkách SendPulse, zvyšují důvěryhodnost odesílaných e-mailů, takže vaše e-maily s menší pravděpodobností skončí ve spamu nebo na černé listině.

Boti pro Facebook Messenger

Facebook chatbot je v beta testování. Můžete jej připojit ke své stránce a odesílat zprávy odběratelům.

Odesílání SMS

Pomocí služby SendPulse je snadné odesílat korespondenci do databáze telefonní čísla... Nejprve si musíte vytvořit adresář se seznamem telefonních čísel. Chcete-li to provést, vyberte sekci "Adresář", vytvořte nový adresář, nahrajte telefonní čísla. Nyní můžete pro tuto databázi vytvořit SMS mailing list. Cena SMS zpráv se liší v závislosti na telekomunikačních operátorech příjemce a pohybuje se v průměru od 1,26 rublů do 2,55 rublů za 1 odeslanou SMS.

affiliate program

Nářadí SendPulse affiliate program, v rámci kterého vám registrovaný uživatel pomocí vašeho odkazu, který zaplatil za tarif, přinese 4000 rublů. Pozvaný uživatel obdrží slevu 4 000 rublů za prvních 5 měsíců používání služby.

Překlad

Síla CSS3 je ohromující a v tomto tutoriálu se můžete podívat, jak ji kreativně používat. Vytvoříme nějaké efekty přechodu pomocí CSS3 přechodů. Když najedete myší na miniaturu, zobrazí se popis miniatur s použitím různých stylů v každém příkladu.

Upozorňujeme, že tyto příklady budou správně fungovat pouze v moderních prohlížečích, které podporují vlastnosti CSS3.

HTML značení

Struktura značek je velmi jednoduchá a intuitivní. Vytvořte kontejner, který bude obsahovat obrázek a další informace, jako je název, popis a další.

Do bloku s pohledem třídy vložíme prvek s maskou třídy, který bude mít na starosti naše CSS3 efekty, do něj vložíme nadpis, popis a odkaz na celý obrázek. (U některých příkladů budeme muset přidat masku jako samostatný prvek a zabalit popis do prvku div s obsahem třídy.)

Titul

Přečtěte si více

CSS

Po vytvoření označení vytvoříme naše styly.

Nainstalujeme hlavní pravidla pro naše styly a poté přidáme vlastní třídy s požadovanými efekty. V tomto článku vynecháme předpony CSS pro různé prohlížeče, ale můžete je vidět ve zdrojích.
.view (šířka: 300px; výška: 200px; okraj: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relativní; text-align: center; box-shadow: 1px 1px 2px # e6e6e6; kurzor: výchozí; pozadí: #fff url (../ obrázky / bgimg.jpg) neopakovatelné centrum uprostřed) .view .mask, .view .content (šířka: 300px; výška: 200px; pozice: absolutní; přetečení: skryté ; nahoře: 0; vlevo: 0) .view img (zobrazení: blok; poloha: relativní) .view h2 (transformace textu: velká písmena; barva: #fff; zarovnání textu: na střed; pozice: relativní; velikost písma: 17px; výplň: 10px; pozadí: rgba (0, 0, 0, 0,8); okraj: 20px 0 0 0 .view p (rodina písma: Georgia, patka; styl písma: kurzíva; velikost písma: 12px; position: relativní; barva: #fff; padding: 10px 20px 20px; text-align: center) .view a.info (zobrazení: inline-block; text-decoration: none; padding: 7px 14px; background: # 000; color : #fff; text-transform: velká písmena; box-shadow: 0 0 1px # 000) .view a.info:hover (box-shadow: 0 0 5 px # 000)
Nyní se podíváme na deset efektů.

Příklad 1

Pro tento efekt přidáme k elementu se zobrazením třídy speciální třídu view-first. Přidáme vlastní třídu pro každou instanci prvku zobrazení (view-first, view-second, view-third atd.).

V prvním příkladu použijeme pouze některé základní přechody k vytvoření pěkného efektu vznášení:
.view-first img (přechod: všechny 0,2 s lineární;) .view-first .mask (neprůhlednost: 0; barva pozadí: rgba (219,127,8, 0,7); přechod: všech 0,4 s náběh a výstup;) .view-first h2 (transformace: translateY (-100px); neprůhlednost: 0; přechod: vše 0,2s náběh-v-out;) .view-first p (transformace: translateY (100px); neprůhlednost: 0; přechod: vše 0,2 s lineární;) .view-first a.info (neprůhlednost: 0; přechod: všech 0,2 s náběh a výstup;)
Nyní přichází ta zábavná část našeho účinku. Když najedeme kurzorem na obrázek, můžeme použít vlastnost delay k simulaci jednoduché animace. přechodové zpoždění, které používáme při vznášení, lze změnit tak, aby se lišilo od normální třídy. V tomto příkladu jsme nepoužili žádné zpoždění v normální třídě, ale přidali jsme zpoždění do hoveru, což trochu pozdrží přechodový efekt.
.view-first: hover img (transformace: měřítko (1.1);) .view-first: hover .mask (neprůhlednost: 1;) .view-first: hover h2, .view-first: hover p, .view-first : hover a.info (neprůhlednost: 1; transformace: translateY (0px);) .view-first: hover p (zpoždění přechodu: 0,1 s;) .view-first: hover a.info (zpoždění přechodu: 0,2 s ;)

Příklad 2

Ve druhém příkladu přidáme vlastní třídu view-second, ale prvek s třídou mask ponecháme prázdný a popis zabalíme do prvku div s třídou obsahu.

Styl přechodu # 2

Nějaký popis

Přečtěte si více

Zde bude mít třída mask různé atributy, zejména použijeme vlastnost transform (přeložit a otočit). Popisy prvků budou přesunuty tak, abychom je mohli přesunout společně při najetí myší:
.view-second img (přechod: všech 0,2s náběhu;) .view-second .mask (barva pozadí: rgba (115,146,184, 0,7); šířka: 300px; odsazení: 60px; výška: 300px; neprůhlednost: 0; transform: translate (265px, 145px) rotation (45deg); transition: all 0.2s easy-in-out;) .view-second h2 (border-bottom: 1px solid rgba (0, 0, 0, 0.3); background: transparentní; margin: 20px 40px 0px 40px; transform: translate (200px, -200px); transition: all 0,2s easy-in-out;) .view-second p (transform: translate (-200px, 200px); transition: all 0,2 s náběh;) .view-second a.info (transformace: přeložit (0px, 100px); přechod: vše 0,2s 0,1s náběh;)
Pro náš efekt vznášení používáme translační transformaci k přesunu našich prvků na místo. maska se bude také otáčet. Položky popisu se přesunou s mírným zpožděním:
.view-second: hover .mask (neprůhlednost: 1; transform: translate (-80px, -125px) rotace (45deg);) .view-second: hover h2 (transform: translate (0px, 0px); transition-delay: 0,3s;) .view-second: hover p (transformace: translate (0px, 0px); transition-delay: 0,4s;) .view-second: hover a.info (transform: translate (0px, 0px); transition- zpoždění: 0,5s ;)

Příklad 3

Ve třetím příkladu použijeme transformaci překládání a otáčení:
.view-third img (přechod: všech 0,2 s náběh;) .view-third .mask (barva pozadí: rgba (0,0,0,0,6); opacity: 0; transform: translate (460px, -100px) ) otočení (180 stupňů); přechod: vše 0,2 s 0,4 s náběh-ven-out;) .view-third h2 (transformace: translateY (-100px); přechod: všech 0,2s náběh-ven-out;) .view-third p (transformace: translateX (300px) otočení (90deg); přechod: všech 0,2s náběh-v-out;) .view-third a.info (transformace: translateY (-200px); přechod: všech 0,2s náběh-v- ven;)
to jednoduché pokyny které se mají aplikovat při najetí myší. Nyní převrátíme popisy prvků tak, že odpovídajícím způsobem nastavíme zpoždění přechodu:
.view-third: hover .mask (neprůhlednost: 1; transition-delay: 0s; transform: translate (0px, 0px);) .view-third: hover h2 (transform: translateY (0px); transition-delay: 0,5s ;) .view-third: hover p (transformace: translateX (0px) rotace (0deg); transition-delay: 0,4s;) .view-third: hover a.info (transform: translateY (0px); transition-delay: 0,3 s ;)

Příklad 4

Ve čtvrtém příkladu provedeme jednoduché zmenšení obrázku a rotační zvětšení našeho obsahu, to vše díky transformaci měřítka. Pro styly obrázků nastavíme zpoždění přechodu na 0,2, ale při najetí myší jej změníme na 0 s. To spustí animaci okamžitě po najetí myší, ale zdrží ji, když kurzor opustí.
.view-fourth img (přechod: všech 0,4s náběh a výstup 0,2s; neprůhlednost: 1;) .view-fourth .mask (barva pozadí: rgba (0,0,0,0,8); neprůhlednost: 0; transformace: měřítko (0) otočení (-180 stupňů); přechod: vše 0,4s náběh; border-radius: 0px;) .view-fourth h2 (neprůhlednost: 0; border-bottom: 1px solid rgba (0, 0, 0, 0,3); pozadí: průhledné; okraj: 20px 40px 0px 40px; přechod: vše 0,5s náběh z náběhu;) .view-fourth p (neprůhlednost: 0; přechod: všech 0,5s náběh z náběhu;) .view-fourth a.info (neprůhlednost: 0; přechod: všech 0,5 s náběh a výstup;)
Toto jsou pokyny k dosažení tohoto efektu - s CSS3 můžete dělat cokoli :).
.view-fourth: hover .mask (neprůhlednost: 1; transformace: měřítko (1) rotace (0°); přechod-zpoždění: 0,2s;) .view-fourth: hover img (transformace: měřítko (0); neprůhlednost: 0 ; transition-delay: 0s;) .view-fourth: hover h2, .view-fourth: hover p, .view-fourth: hover a.info (neprůhlednost: 1; transition-delay: 0,5s;)

Příklad 5

V tomto pátém příkladu použijeme vlastnost translate spolu s funkcí přechodu-časování-náběhu-ven-out k přesunutí obsahu na levou stranu.
.view-fifth img (přechod: všech 0,3 s náběh-v-out;) .view-fifth .mask (barva pozadí: rgba (146,96,91,0,3); transform: translateX (-300px); neprůhlednost: 2 , 140, 0,5);) .view-fifth p (neprůhlednost: 0; barva: # 333; přechod: vše 0,2 s lineární;)
Efekt přechodu posune obrázek doprava a popis se zobrazí na levé straně, jako by obrázek posunul:
.view-fifth: hover .mask (transform: translateX (0px);) .view-fifth: hover img (transform: translateX (300px); transition-delay: 0,1s;) .view-fifth: hover p (neprůhlednost: 1; zpoždění přechodu: 0,4s ;)

Příklad 6

V tomto příkladu vytvoříme popis zobrazený vpředu a změníme velikost obrázku na původní velikost (měřítko od 10 do 1). V dolní části se objeví tlačítko „přečíst více“ (přeložit).
.view-sixth img (přechod: všech 0,4s náběh a výstup 0,5s;) .view-sixth .mask (barva pozadí: rgba (146,96,91,0,5); neprůhlednost: 0; přechod: vše 0,3 s easy-in 0,4s;) .view-sixth h2 (neprůhlednost: 0; okraj-dole: 1px solid rgba (0, 0, 0, 0,3); pozadí: průhledné; okraj: 20px 40px 0px 40px; transform: scale ( 10); přechod: všech 0,3 s náběh-v-out 0,1 s;) .pohled-šestý p (neprůhlednost: 0; transformace: měřítko (10); přechod: všech 0,3s náběh-v-out 0,2 s;) .pohled -šestý a.info (neprůhlednost: 0; transformace: translateY (100px); přechod: vše 0,3s náběh 0,1s;)
Zpětný přechod bude zpožděn, aby vypadal hladce:
.view-sixth: hover .mask (neprůhlednost: 1; transition-delay: 0s;) .view-sixth: hover img (transition-delay: 0s;) .view-sixth: hover h2 (neprůhlednost: 1; transform: scale (1); transition-delay: 0,1s;) .view-sixth: hover p (neprůhlednost: 1; transformace: scale (1); transition-delay: 0,2s;) .view-sixth: hover a.info (neprůhlednost : 1; transformace: translateY (0px); zpoždění přechodu: 0,3 s;)

Příklad 7

V sedmém příkladu je myšlenkou otočit obraz ve středu a přesunout jej do dálky. Poté se objeví popis, který skryje rotující obrázek za ním.
( 1); neprůhlednost: 0; přechod: všech 0,3 s uvolnění; transformace: přeložitY (-200 pixelů) otočit (180 stupňů);) .view-seventh h2 (transformace: přeložitY (-200 pixelů); přechod: všech 0,2 s snadnost- in-out;) .view-seventh p (transformace: translateY (-200px); přechod: vše 0,2s easy-in-out;) .view-seventh a.info (transform: translateY (-200px); přechod: vše 0,2 s snadné náběhu;)
Při umístění kurzoru přidáme zpoždění pro popisné prvky. To nám umožní vidět rotující obrázek dříve, než popis skryje obrázek. Při obráceném přechodu vše okamžitě zmizí a my uvidíme, jak se obrázek otáčí v opačném směru:
.view-seventh: hover img (transformace: rotace (720 stupňů) měřítko (0); neprůhlednost: 0;) .view-seventh: hover .mask (opacity: 1; transform: translateY (0px) rotace (0deg); transition- zpoždění: 0,4s;) .view-seventh: hover h2 (transformace: translateY (0px); transition-delay: 0,7s;) .view-seventh: hover p (transformace: translateY (0px); transition-delay: 0,6s ;) .view-seventh: hover a.info (transform: translateY (0px); transition-delay: 0,5s;)

Příklad 8

V osmém příkladu použijeme animaci a znovu vytvoříme efekt odrazu. Popis sestoupí zespodu a odrazí se od spodního okraje.
.view-eighth .mask (background-color: rgba (255, 255, 255, 0.7); top: -200px; opacity: 0; transition: all 0.3s easy-out 0.5s;) .view-eighth h2 (transform : translateY (-200px); přechod: vše 0,2s náběh 0,1s;) .view-eighth p (barva: # 333; transformace: translateY (-200px); přechod: všech 0,2s náběh-in-out 0,2 s;) .view-eighth a.info (transformace: translateY (-200px); přechod: všech 0,2s easy-in-out 0,3s;)
K prvku masky přidáme animaci a definujeme některá nastavení zpoždění pro prvky popisu:
.view-eighth: hover .mask (neprůhlednost: 1; top: 0px; transition-delay: 0s; animace: bounceY 0,9s linear;) .view-eighth: hover h2 (transform: translateY (0px); transition-delay: 0.4s;) .view-eighth: hover p (transformace: translateY (0px); transition-delay: 0.2s;) .view-eighth: hover a.info (transform: translateY (0px); transition-delay: 0s; )
Abychom znovu vytvořili skutečný efekt odrážení, použijeme translateY, jak vidíte, existuje několik snímků, které vytvářejí tento efekt:
@keyframes bounceY (0 % (transformace: translateY (-205px);) 40 % (transformace: translateY (-100px);) 65 % (transformace: translateY (-52px);) 82 % (transformace: translateY (-25px) ;) 92 % (transform: translateY (-12px);) 55%, 75%, 87%, 97%, 100% (transform: translateY (0px);))

Příklad 9

V tomto příkladu použijeme dva prvky masky k jejich odsazení od pravého dolního a levého horního rohu:

Styl přechodu # 9

Přečtěte si více

Prvky masky budou mít různé hodnoty translace a transfrom-origin. A také naznačíme, že jeden je zarovnán na horním okraji a druhý na spodním okraji:
.view-ninth .mask-1, .view-ninth .mask-2 (barva pozadí: rgba (0,0,0,0,5); výška: 361px; šířka: 361px; pozadí: rgba (119,0,36) , 0,5); neprůhlednost: 1; přechod: vše 0,3 s náběh a výstup 0,6 s;) .view-devátý .mask-1 (vlevo: auto; vpravo: 0px; transformace: otočení (56,5°) translateX (-180px ); transform-origin: 100% 0%;) .view-ninth .mask-2 (top: auto; bottom: 0px; transform: rotation (56.5deg) translateX (180px); transform-origin: 0% 100%; ) .view-devátý .content (pozadí: rgba (0,0,0,0,9); výška: 0px; neprůhlednost: 0,5; šířka: 361px; přetečení: skryté; transformace: otočení (-33,5°) přeložení (-112px, ( 255,255,255,0,2);) .view-devátý a.info (zobrazení: žádné;)
Při najetí myší způsobíme, že obsah bude vypadat jakoby zpod dvou pohybujících se prvků středové masky:
.view-devátý: hover .content (výška: 120px; šířka: 300px; neprůhlednost: 0,9; horní: 40px; transformace: otočení (0°) přeložení (0px, 0px);) .view-ninth: hover .mask-1, .view-devátý: hover .mask-2 (transition-delay: 0s;) .view-devátý: hover .mask-1 (transformace: otočení (56,5°) translateX (1px);) .view-devátý: hover .mask -2 (transformace: otočení (56,5 stupně) přeloženíX (-1px);)
Zpoždění přechodu pro prvky masky jsme nastavili tak, že když najedeme, přechod je okamžitý, ale když myš odejde, zpoždění bude delší.

Příklad 10

V posledním příkladu obrázek zvětšíme a poté skryjeme, přičemž popis přeneseme dopředu. Můžeme to udělat pomocí transformace měřítka a úpravou úrovně průhlednosti:
.view-tenth img (transformace: scaleY (1); přechod: všech 0,7 s náběh a výstup;) .view-tenth .mask (barva pozadí: rgba (255, 231, 179, 0,3); přechod: vše 0,5s lineární; neprůhlednost: 0;) .view-tenth h2 (ohraničení-dole: 1px pevné rgba (0, 0, 0, 0,3); pozadí: průhledné; okraj: 20px 40px 0px 40px; transformace: měřítko (0); barva: # 333; přechod: vše 0,5 s lineární; neprůhlednost: 0;) .view-desáté p (barva: # 333; neprůhlednost: 0; transformace: měřítko (0); přechod: vše 0,5 s lineární;) .view- desetina a.info (neprůhlednost: 0; transformace: měřítko (0); přechod: vše 0,5 s lineární;)
Při najetí myší jednoduše změníme měřítko obrázku a proč jej skrýt snížením jeho krytí na 0:
.zobrazení-desátý: vznášet se img (transformace: měřítko (10); neprůhlednost: 0;) .zobrazit-desátý: vznášet se .mask (neprůhlednost: 1;) .zobrazit-desátý: vznášet se h2, .zobrazit-desátý: vznášet se p, .view-tenth: hover a.info (transformace: měřítko (1); neprůhlednost: 1;)

Závěr

CSS3 má opravdu velký potenciál pro vytváření krásných efektů. Brzy se snad budeme moci vyhnout používání JavaScriptu pro jednoduché efekty a 100% spoléhat na CSS ve všech prohlížečích.

Doufám, že se vám tyto experimenty líbily, ale především doufám, že vás mohou inspirovat k vytváření vlastních efektů.

P.S. Tento článek je logickým pokračováním článku z

Štítky:

css3
efekty
přechod
přeložit

Přidat štítky

CSS3 poskytlo nespočet příležitostí pro designéry UX a nejlepší na tom je, že ty nejúžasnější prvky se opravdu snadno implementují.

Jen pár řádků kódu vytvoří úžasné přechodové efekty, které nadchnou vaše uživatele, zvýší zapojení a nakonec, správné použití, zvýší vaši návštěvnost. Navíc tyto efekty využívají hardwarová akcelerace, to je pokrok - do kterého se můžete zapojit právě teď.

Zde je 8 opravdu jednoduchých efektů, které dodají život vašemu uživatelskému rozhraní a úsměvy na tvářích vašich uživatelů.

Všechny tyto efekty (jeden obdélník) se ovládají pomocí vlastnosti přechodu. Abychom viděli, jak tyto efekty fungují, vytvořili jsme na stránce HTML prvek div:

Až budete hotovi, nastavte jeho šířku a výšku (tak, aby měl velikost), barvu pozadí (abychom to viděli) a vlastnosti jeho efektu.

Vlastnost přechodu má tři hodnoty: vlastnosti přechodu (v našem případě všechny), rychlost přechodu (v našem případě 0,3 sekundy) a třetí hodnotu, která umožňuje změnit způsob výpočtu zrychlení a zpomalení, ale zůstaneme u výchozího nastavení. nastavení, ponechte pole prázdné.

Nyní stačí změnit vlastnosti a budou se nám animovat.

Pokud chcete pokračovat sami, pak jsou ukázkové soubory pro vás.

1. Stmívání

Stmívací efekty jsou poměrně častým požadavkem zákazníků. Je to skvělý způsob, jak zvýraznit funkčnost nebo upozornit na výzvu k akci.

Efekt je zakódován ve dvou krocích: nejprve nastavíte počáteční stav; pak nastavte změnu, například při přejetí myší:

Fade (neprůhlednost: 0,5;) .fade: hover (neprůhlednost: 1;)

(Ujistěte se, že jste svému divu dali třídu „fade“, abyste viděli, jak to funguje.)

2. Změna barvy

V minulosti byla animace změny barvy neuvěřitelně složitá a zahrnovala matematiku, která se týkala výpočtu jednotlivých hodnot RGB a jejich následného zkombinování. Nyní jen nastavíme třídu div "color" a nastavíme barvu, kterou chceme v CSS:

Barva: hover (pozadí: # 53a7ea;)

3. Přiblížení a oddálení

Kdysi bylo pro zvětšení prvku nutné použít jeho šířku a výšku, případně parametr plnosti. Ale zatím můžeme k přiblížení použít transformaci CSS3.

Nastavte třídu div na „růst“ a poté přidejte tento kód do svého stylu bloku:

Grow: hover (-webkit-transform: scale (1.3); -ms-transform: scale (1.3); transform: scale (1.3);)

Zmenšení prvku je stejně snadné jako jeho zvětšení. Aby byl prvek větší, zadáme hodnotu větší než 1, pro zmenšení zadáme hodnotu menší než 1:

Zmenšit: hover (-webkit-transform: scale (0,8); -ms-transform: scale (0,8); transform: scale (0,8);)

4. Kroucení prvků

CSS poskytuje řadu transformací a jednou z nejlepších je kroucení prvků. Dejte svému divu třídu „rotate“ a přidejte do svého CSS následující řádky:

Rotace: hover (-webkit-transform: rotationZ (-30deg); -ms-transform: rotationZ (-30deg); transform: rotationZ (-30deg);)

5. Otočení čtverce do kruhu

Nyní je velmi populární efekt přeměny čtvercového prvku na kulatý a naopak. S CSS je toho snadné dosáhnout, jen převedeme vlastnost border-radius. Použijeme pouze vlastnost border-radius.

Dejte svému divu třídu „kruh“ a přidejte tyto řádky do svých šablon stylů:

Kruh: přesuňte se (poloměr okraje: 50 %;)

6. 3D stín

3D stíny byly asi rok odsuzovány, protože, jak vidíte, nezapadaly do plochého designu, což je samozřejmě blbost, fungují fantasticky dobře a dávají uživateli pocit zapojení jak s plochým designem, tak s pseudo 3D rozhraním. .

Tohoto efektu je dosaženo přidáním stínového obdélníku a následným posunutím prvku na ose x změnou vlastnosti transformace a překladu tak, aby to vypadalo, jako by prvek vyrůstal z obrazovky.

Dejte svému divu třídu „threed“ a poté do CSS přidejte následující kód:

Threed: hover (box-shadow: 1px 1px # 53a7ea, 2px 2px # 53a7ea, 3px 3px # 53a7ea; -webkit-transform: translateX (-3px); transform: translateX (-3px);)

7. Houpačka

Ne všechny prvky používají vlastnost přechodu. Můžeme také vytvářet velmi složité animace pomocí @keyframes, animace a animace-iterace.

V tomto případě nejprve definujeme CSS animace ve stylech. Všimnete si, že kvůli problémům s implementací musíme použít @ -webkit-keyframes i @keyframes (ano, internet Explorer opravdu lepší než Chrome, alespoň v tomto ohledu).

@ -webkit-keyframes swing (15 % (-webkit-transform: translateX (5px); transform: translateX (5px);) 30 % (-webkit-transform: translateX (-5px); transform: translateX (-5px); ) 50 % (-webkit-transform: translateX (3px); transform: translateX (3px);) 65 % (-webkit-transform: translateX (-3px); transform: translateX (-3px);) 80 % (-webkit -transform: translateX (2px); transform: translateX (2px);) 100 % (-webkit-transform: translateX (0); transform: translateX (0);)) @keyframes swing (15 % (-webkit-transform: translateX (5px); transform: translateX (5px);) 30 % (-webkit-transform: translateX (-5px); transform: translateX (-5px);) 50 % (-webkit-transform: translateX (3px); transform : translateX (3px);) 65 % (-webkit-transform: translateX (-3px); transform: translateX (-3px);) 80 % (-webkit-transform: translateX (2px); transform: translateX (2px); ) 100 % (-webkit-transform: translateX (0); transform: translateX (0);))

8. Vložte ohraničení

Jedním z nejžhavějších stylů tlačítek v současnosti je tlačítko duchů; tlačítko bez pozadí a tučného okraje. K prvku můžeme samozřejmě jen přidat ohraničení, ale tím se změní poloha prvku. S tím jsme si mohli poradit pomocí rozměrů boxů, ale mnohem jednodušším řešením je přejít na hranici vložením stínu.

Dejte svému případu třídu „border“ a přidejte pro své styly následující CSS:

Ohraničení: hover (box-shadow: inset 0 0 0 25px # 53a7ea;)

Chceš vědět, ? nebo ? To vše a mnohem více na webu. Přihlaste se k odběru našeho e-mailového zpravodaje (ve spodní části stránky) nebo k a o nových článcích se dozvíte jako první! Připojte se také k našemu

Nejprve pro ty, kteří se v předmětu úplně nebo vůbec neorientují, stručně vysvětlím, co to jsou efekty vznášení. Jedná se o různé typy efektů (vyskakovací titulky, popisky, plynulé přechody, transformace, rotace, zoom, offset atd.) aplikované na prvky webové stránky, když na ně najedete kurzorem myši. Tyto efekty lze implementovat pomocí různých pluginů jQuery a čistého CSS3.
Dnes jsem pro vás připravil velký výběr originálních hover efektů pro obrázky vytvořené pomocí CSS3, bez připojení javascriptových knihoven. Nebudu mluvit o výhodách a nevýhodách implementace hover efektů v čistém CSS3, to je jiné téma, stačí se podívat na příklady a případně použít ten, který se vám líbí na vašem webu. Všechny efekty uvedené v přehledu jsou dodávány s ukázkovým příkladem a podrobnou dokumentací se zdroji. Návody jsou většinou v buržoazii, ale vše je víceméně intuitivní.

Chci vás jen upozornit na skutečnost, že všechny tyto příklady budou správně fungovat pouze v moderních prohlížečích, které podporují vlastnosti CSS3.

Aby nenarušil celkový obraz, nezkomolil názvy efektů strojovým překladem (až na některé), originály titulů ponechal tak, jak je vývojář nazval.

Velmi jednoduchý přechodový efekt, bez jakýchkoli zvonků a píšťalek, zcela kulatý obraz v rámečku, promění se změnou ohniska při vznášení a je to.