css podržte kurzor myši. Originálne efekty vznášania. Ako vytvoriť čistý efekt vznášania CSS na základe smeru kurzora

18.06.2019

Myšlienka oddelenia prezentácie informácií od kódu, ktorý ju vytvára a spracováva, sa stala radikálne novou. Vo svojej dobe to bolo silné rozhodnutie, no tento moment vtedy nebol plne uznaný. Keď sa programovanie oddelilo od jedného počítača, ale nezvíťazilo v lokálnej sieti alebo v jednej doménovej zóne, ale okamžite sa rozšírilo všade, až potom sa ukázalo, že prezentácia informácií (po dizajnovej stránke) a práca s nimi (v zmysle kódu) sú dve strany v rovnakej rovine.

Tri aspekty tvorby webových stránok

Z formálneho hľadiska existujú tri hlavné komponenty (v rôznych syntaktických podobách), ktoré tvoria stránku: PHP kód, JavaScript kód a CSS štýly. Vôbec nezáleží na tom, ako sa tento alebo ten komponent nazýva a aká verzia sa používa, aká verzia značky HTML sa používa a aká verzia prehliadača je nainštalovaná. Kompatibilita sa teraz veľmi neváži, pretože relevantné v každom okamihu: čo je zakódované a čo z toho, čo je zakódované, možno zobraziť a spustiť.

Ak skoršie jazyky bojovali o nápady, dnes výrobcovia štandardov v oblasti internetových technológií a prehliadačov viac radi bojujú naprázdno.

Súkromné a verejné

Existuje mnoho prostriedkov, ktorými je internet dostupný (počítače, notebooky, tablety, smartfóny), bohaté sú aj prehliadače. Neexistuje žiadna záruka, že konkrétne zariadenie zobrazí stránku vo forme, v akej ju vytvoril vývojár. Snahy tých druhých nie vždy dosahujú cieľ a poskytujú webdizajnu jedinú rozmanitosť, teda jednotu zobrazenia podstaty, kdekoľvek sa návštevníkom otvorí.

Oddelením súkromného od verejného, použitím iba toho, čo funguje v druhom, možno dosiahnuť výrazný úspech v dizajne. Krása, umelecký moment a webdizajn sú osudom príslušných špecialistov a talentov. CSS je kód, aj keď veľmi zvláštny. Jeho starosťou je popísať štýly (možnosti zobrazenia informácií). S príchodom mobilných zariadení bol CSS nabitý skutočným kódovaním vo forme mediálnych dopytov. Takže možnosť opätovného sobáša medzi dizajnom a kódom nie je taká nereálna, ako sa mohlo zdať len pred pár rokmi.

Vývojár sa pri vývoji štýlov CSS spolieha na svoje osobné osvedčené skúsenosti a na tie konštrukcie CSS, ktoré fungujú vo väčšine prehliadačov a uspokoja väčšinu návštevníkov stránok. Prvý by ste mali používať čo najviac a druhý čo najmenej, potom je oveľa pravdepodobnejšie, že dosiahnete výsledok, ktorý funguje takmer vždy a všade.

Prvé pravidlo: spoliehajte sa na štandard, ale nerobte chybu sami

CSS:hover je, keď myš umiestnila kurzor myši na prvok na stránke. Po kliknutí myšou na prvok sa prvok stane aktívnym, ale keď sa kurzor vzdiali, môže sa opäť zmeniť a zobraziť sa v aktívnom stave. „:hover“, „active“ a „visited“ sú najpoužívanejšie pseudotriedy pri popise štýlov.

V kóde stránky je veľmi výhodné nestarať sa o také maličkosti, ako je pohyb myši po prvkoch. Poskytnutím dvoch popisov v tabuľke s popisom štýlu:

farba pozadia: zelená;

Keď umiestnite kurzor myši na prvok, automaticky zmeníme farbu textu z čiernej na bielu a pozadie tohto prvku zmeníme na zelené. Pseudotriedy možno aplikovať na akýkoľvek prvok a dosiahnuť tak rôzne vizuálne efekty.

Druhé pravidlo: dôverujte štandardom, zamerajte sa na svoj kód

Všetko by bolo v poriadku, keby pokrok zostal na úrovni počítačov a notebookov vybavených myšami a pokrok v celulárnej komunikácii neviedol k vzniku smartfónov, tabletov a iných mobilných zariadení, ku ktorým je veľmi problematické takéto zariadenie pripojiť.

Na druhej strane, iba na gadgetoch vybavených špeciálnou dotykovou obrazovkou je možné manipulovať s prstami priamo na dotykovej obrazovke, ako sa to už stalo zvykom na smartfónoch, tabletoch a podobných zariadeniach.

Je tu podstatný rozdiel a :hover tu vôbec nefunguje tak, ako by sme chceli. Kód je tu nevyhnutný a pomocou mediálnych dopytov sa nevyriešia všetky problémy.

Kompatibilita je v dnešnom informačnom svete príliš drahá, preto je pre zabezpečenie správnej funkčnosti stránky v rámci stanovených požiadaviek na web dizajn a funkčnosť vhodnejšie zamerať sa na minimálne nevyhnutné prípady použitia: CSS hover, CSS hover focus, CSS aktívne (navštívené) . Čím viac kódu (v prehliadači aj na serveri) riadi webový dizajn, tým lepšie. Program je ovládanie, je lepšie, keď sa toto ovládanie nepoddá súčasným štandardom, od ktorých často neviete, čo môžete očakávať.

Tlačidlá a ďalšie prvky stránky

CSS pri umiestnení kurzora na tlačidlo je skvelé riešenie, ale vo všeobecnosti je každý prvok na stránke „tlačidlo“. Stránka musí byť v prvom rade živá, a ak to nie je zahrnuté v kóde, ak je úlohou vytvoriť stránku, ktorá sa vyvíja adekvátne pre oblasť aplikácie a koná s prihliadnutím na správanie návštevníka, tak aspoň pomocou CSS štýly, môžete oživiť prvky stránky.

Používanie efektov vznášania je pohodlné. S ich pomocou môžete ľahko dať život stránkam, ale kód nevie, čo robí myš na obrazovke, ak nemá možnosť sledovať jej pohyb. Z tohto pohľadu, teda keď kód ovláda pohyb myši (= pohyb prsta na smartfóne), dokáže samostatne zvýrazniť prvok alebo ho transformovať. Toto nemá nič spoločné s pseudotriedami, ale dáva kódu plnú kontrolu nad vzhľadom stránky, čo umožňuje jej adekvátne zobrazenie na rôznych zariadeniach v rôznych prehliadačoch.

Úskalia v štýloch

Nedá sa povedať, že štandardy CSS štýlu nevedia, čo robia, ale nedá sa ani povedať, že by plne interagovali s inými štandardmi v oblasti programovania na internete.

Štýly a pseudotriedy je možné opísať vo fáze kódovania stránky, v momente, keď server generuje stránku av dynamike: už v prehliadači môžete ľahko vytvoriť nový štýl a zmeniť existujúci.

Využitie AJAXu, kedy nie je potrebné znovu generovať stránku, aby sa zobrazila reakcia na akciu návštevníka, ale stačí zmeniť jej prvok alebo viacero prvkov pridá trochu „peprenia“. "Priateľstvo" kódov - to, čo je už v prehliadači (JavaScript) a čo je na serveri (PHP) - je dielom autora (programátora) stránky.

Nielen zobrazenie jeho prvkov na stránke, ale aj ich ďalšie vnímanie kódom výrazne závisí od toho, ako bude algoritmus tejto interakcie vykonaný. Jednoducho povedané, pseudotriedy (najmä) sú veľmi dobré pre statiku, niečo ako plavba na jachte na čistom mori s miernym vetrom - všetko je zrejmé, prístupné a zvládnuteľné. Ak sa zmení počasie, zosilnie vietor alebo návštevník spôsobí nepredvídanú situáciu, je možné rýchlo nabehnúť na útes a návštevníka stratiť.

Štandard a jeho emulácia

Hover je možné emulovať v JavaScripte pomocou udalostí onmouseover a onmouseout. Často tu všetko končí. Z hľadiska zdravého rozumu, pokiaľ ide o vytvorenie skutočne fungujúcej stránky, je lepšie držať kontrolu vo svojich rukách, ako ju vydať na milosť a nemilosť mýtickým štandardom, ktoré sa menia nad rámec vôle a túžby vývojára.

Niekedy si môžete prečítať niečo ako „táto funkcia je dokonca dostupná v IE“, ale častejšie sa môžete dočítať o tom, ktoré popisy štýlov akceptuje konkrétny prehliadač. Oveľa menej často sa dozviete, ako sa JavaScript líši v určitých prehliadačoch.

Hodnotenie získaných skúseností, obdivovanie schopností prehliadača Chrome a Opera, kritika pomalosti a inertnosti prehliadača od výrobcu (nezabudnuteľné, srdcu každého programátora IE od Microsoftu: „Starý dobrý Internet Explorer nekarhali len leniví. Alebo niekto, kto môže hrať Klondike iba na počítači,- citát od neznámeho internetového autora), mali by ste sa držať zlatej strednej cesty: používajte to, čo funguje všade a vždy.

Ľudia potrebujú finančné prostriedky na prácu, keď sa potrebujú zabaviť, zvyčajne idú na matriku alebo do divadla, ale nie na internet.

Emulácia a kontrola

Predtým, keď sa programovanie stavalo na nohy, bolo zvykom počúvať starších a správne písať. Dnes je seniorov priveľa, všetko sa mení prirýchlo a ak budete všetkých počúvať, tak nebude dosť času ani na veľmi jednoduchú prácu, na minimálne funkčnú stránku.

Programovanie je v prvom rade kontrola a v prípadoch, keď norma stanovuje pravidlá neobjektívne, alebo možno očakávať prudkú zmenu pravidla, jeho odstránenie a vznik nového, bolo vždy najlepšie rozhodnutie neurobiť žiadne. rozhodnutia, ale implementovať požadovanú funkcionalitu stránky s minimálnym možným, ale skutočne fungujúcim kódom.

V prvom rade pre tých, ktorí nie sú v predmete celkom alebo vôbec nie, v krátkosti vysvetlím, čo to je. Ide o rôzne typy efektov (vyskakovacie titulky, tipy, plynulé prechody, transformácia, rotácia, zväčšenie, posunutie atď.) aplikované na prvky webovej stránky kurzorom myši na ne. Tie je možné implementovať ako pomocou rôznych jQuery pluginov, tak aj na čistom .
Dnes som pripravil veľký výber originálnych efektov vznášania pre obrázky vytvorené pomocou CSS3, bez zahrnutia knižníc javascriptu. Nebudem hovoriť o výhodách a nevýhodách implementácie hover efektov na čistom CSS3, toto je iná téma, stačí si pozrieť príklady a v prípade potreby použiť na svojej stránke ten, ktorý sa vám páči. Všetky efekty prezentované v recenzii sú vybavené ukážkou a podrobnou dokumentáciou so zdrojovými kódmi. Návody sú väčšinou v buržoáznom jazyku, ale všetko je viac-menej intuitívne.

Chcem len upozorniť na skutočnosť, že všetky tieto príklady budú správne fungovať iba v moderných prehliadačoch, ktoré podporujú vlastnosti CSS3.

Aby som nenarušil celkový obraz, názvy efektov som neskomolil strojovým prekladom (s výnimkou niektorých), pôvodné názvy som ponechal tak, ako ich vývojár nazval.

Veľmi zaujímavý efekt vznášania na miniatúrach obrázkov s použitím tenkých čiar v dizajne a typografii. Niekoľko rôznych druhov efektov titulkov obrázkov, jemné a nevtieravé 3D transformácie a hladké prechody pseudoprvkov. Funguje iba v moderných prehliadačoch.

iHover je pôsobivá zbierka čistých efektov vznášania CSS3 s podporou Bootstrap 3. Postavený na Scss CSS (súbor), ľahko modifikovateľný pomocou premenných. Kód je modulárny, nie je potrebné zahrnúť celý súbor. 30+ rôznych efektov v jednom balení. Všetko je pekne zdokumentované, efekty sa veľmi ľahko používajú. Všetko, čo musíte urobiť, je správne vytvoriť značku HTML a zahrnúť súbor CSS, aby fungoval.

Vytvára niekoľko jednoduchých, ale štýlových efektov vznášania pre popisky obrázkov. Myšlienka je, že keď umiestnite kurzor myši na miniatúry, môžete efektívne zobraziť názov, meno autora a tlačidlo odkazu. Niektoré efekty využívajú 3D vizuálne transformácie.

Veľmi jednoduchý prechodový efekt, bez akýchkoľvek zvončekov a píšťaliek, úplne okrúhly obraz v ráme, premení sa zmenou ohniska pri vznášaní a je to.

CSS3 Hover Effects pre miniatúry

Vývojár umiestni svoju prácu ako príklad galérie obrázkov s prechodovými efektmi, keď sa objavia anotácie (titulky) k miniatúram. Spoľahlivú podporu deklarujú moderné prehliadače vrátane IE 9+. Samozrejme, je ťažké to nazvať plnohodnotnou galériou, ale efekt vzhľadu podpisov je celkom zaujímavý.

Ďalšia sada pravidiel CSS na vytvorenie pôsobivých efektov vznášania na dokonale okrúhlych miniatúrach. Balík obsahuje 7 typov prechodov CSS3, veľmi podrobnú dokumentáciu o nastavení a používaní. Efekty sú podporované všetkými modernými prehliadačmi.

Otočte miniatúry pri umiestnení kurzora myši

Jednoduchý efekt otáčania okrúhlych miniatúr pri prejdení kurzorom myši na ne, približne rovnaký môžete vidieť aj na mojom blogu, v oznamoch príspevkov na hlavnej stránke. Je implementovaný v niekoľkých riadkoch kódu css.

Ak je to doslovne preložené: "Efekt sexu pri vznášaní sa nad". Samozrejme, je nepravdepodobné, že si v tomto efekte všimnete niečo také sexi, pokiaľ nemáte bujnú fantáziu, no efekt je svojim spôsobom zaujímavý a stojí za to mu venovať pozornosť.

Päť rôznych efektov pre obrázky, keď na ne umiestnite kurzor myši. Pop-up podpisy v troch variáciách, závesy v podobe zmeny stupňa transparentnosti a rotácie s horizontálnym pohybom.

4 Typy animačných efektov pre popisky obrázkov, implementované výhradne pomocou CSS3. Rôzne polohy pri vzhľade a prechodových efektoch, celkom štandardný výkon. Aby ste pochopili, ako animácia funguje, pozrite si zdrojový kód demo stránky, nenašiel som žiadnu samostatnú dokumentáciu.

Mriežkou lemované galérie miniatúr s rôznymi efektmi vzhľadu titulkov, rotácie, slabnutia, plávania atď. Dokumentácia o používaní a konfigurácii je pomerne vzácna, ale môžete na to prísť s osobitnou túžbou.

Tento efekt nepredstavuje nič zvláštne, banálnu zmenu jasu obrázkov pri vznášaní sa, okrem toho, že sú pridané animačné prvky. S detailmi implementácie sa budete musieť vysporiadať sami rozkladaním zdrojových kódov ukážky.

Ďalšia sada 10 efektov vznášania pre obrázky, rôzne úpravy miniatúr pri vznášaní, priblížení, otočení, otočení, stmavení atď.

Rôzne efekty rámovej animácie okolo obrázkov vyzerajú celkom atraktívne, existuje podrobný návod na nastavenie a používanie.

Pôvodné efekty pri prechode kurzorom CSS3 používané na to, aby sa titulky miniatúr obrázkov efektívne zobrazili pri umiestnení kurzora myši. Sada pravidiel CSS obsahuje 10 rôznych efektov, ktoré môžete použiť samostatne pre rôzne obrázky. Efekty sú skutočne pôsobivé, najmä ak vezmeme do úvahy, že sa to všetko robí pomocou CSS3. Podrobný sprievodca vám pomôže zistiť, čo je čo.

Cieľom je vytvoriť SVG, ktorý je tvarom pozadia pre nejaký text a pri umiestnení kurzora myši sa zmení na iný tvar. Týmto spôsobom môžete urobiť veľa rôznych možností, ale v príklade sú zobrazené tri typy prechodových efektov. Výhodou použitia SVG je, že môžeme zmeniť veľkosť formulára tak, aby zodpovedal veľkosti nadradeného kontajnera.

Posuvné obrázky

Podstatou tohto efektu je, že sa obrázok pohybuje nahor a nadol, aby sa zobrazil titulok. Ak pracujete s parametrami štýlu, myslím, že môžete dosiahnuť celkom pekné efekty a štandardne všetko vyzerá veľmi jednoducho.

S týmto efektom je všetko jednoduché, popisky k obrázkom sa vysúvajú vpravo hore alebo vľavo dole, vo forme stuhy s priesvitným tmavým pozadím, všetko sa veľmi jednoducho pretvaruje pomocou vlastností css.

Zaujímavé riešenie, miniatúry sú prezentované v stmavenej forme, keď na ne prejdete, zobrazia sa obrázky a na svetlom pozadí vyskočí podpis.

Popis obrázka sa objaví z rohu a diagonálne sa rozšíri na celú plochu obrázka.

Niekoľko ďalších zaujímavých riešení na implementáciu kontextových titulkov pre miniatúry obrázkov. V online editore môžete experimentovať s možnosťami a dosiahnuť pôsobivejšie výsledky.

Sada krásnych efektov pri umiestnení kurzora myši na miniatúry, rôzne typy vzhľadu a dizajnu popiskov k obrázkom. Tenké čiary v kontraste s mierne tmavým pozadím vytvárajú ľahko čitateľné informačné bloky.

Bizarné tvary a efekt zväčšenia v spojení s animovaným efektom vzhľadu titulkov k miniatúram obrázkov.

Nádherné efekty prekrytia ikon na miniatúrach obrázkov v rôznych variáciách vzhľadu. V príklade je použitý znak (+) ohraničený krúžkom pomocou border-radius: v CSS môžete použiť aj font ikony, aby bol kontextový panel informatívnejší.

Príklad vytvorenia vizuálneho efektu snímky na zobrazenie objemných obrázkových titulkov iba pomocou CSS3 a HTML5.

6 Popisky obrázkov

6 Varianty vzhľadu vyskakovacích titulkov pre obrázky pri umiestnení kurzora myši pomocou CSS3. Podrobná lekcia o implementácii a konfigurácii, zdrojové kódy dostupné na stiahnutie.

A nakoniec, takpovediac, nemôžem nespomenúť najjednoduchší spôsob, ako vytvoriť kontextový titulok pre miniatúru pomocou CSS3.

O tejto metóde som hovoril v jednej z mojich predchádzajúcich lekcií:.

So všetkou úctou, Andrew

V prvom rade pre tých, ktorí nie sú v predmete celkom alebo vôbec nie, v krátkosti vysvetlím, čo to je. Ide o rôzne typy efektov (vyskakovacie titulky, popisky, plynulé prechody, transformácia, rotácia, zväčšenie, posunutie atď.), ktoré sa aplikujú na prvky webovej stránky, keď na ne prejdete kurzorom myši. Tieto efekty je možné implementovať ako pomocou rôznych doplnkov jQuery, tak aj na čistom .
Dnes som pripravil veľký výber originálnych efektov vznášania pre obrázky vytvorené pomocou CSS3, bez zahrnutia knižníc javascriptu. Nebudem hovoriť o výhodách a nevýhodách implementácie hover efektov na čistom CSS3, toto je iná téma, stačí si pozrieť príklady a v prípade potreby použiť na svojej stránke ten, ktorý sa vám páči. Všetky efekty prezentované v recenzii sú vybavené ukážkou a podrobnou dokumentáciou so zdrojovými kódmi. Návody sú väčšinou v buržoáznom jazyku, ale všetko je viac-menej intuitívne.

Chcem len upozorniť na skutočnosť, že všetky tieto príklady budú správne fungovať iba v moderných prehliadačoch, ktoré podporujú vlastnosti CSS3.

Aby som nenarušil celkový obraz, názvy efektov som neskomolil strojovým prekladom (s výnimkou niektorých), pôvodné názvy som ponechal tak, ako ich vývojár nazval.

Veľmi jednoduchý prechodový efekt, bez akýchkoľvek zvončekov a píšťaliek, úplne okrúhly obraz v ráme, premení sa zmenou ohniska pri vznášaní a je to.