{"id":227509,"date":"2022-09-27T16:49:00","date_gmt":"2022-09-27T13:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227509"},"modified":"2022-11-09T01:02:38","modified_gmt":"2022-11-08T22:02:38","slug":"suurepaerased-css-i-lehtede-ueleminekud-mida-saate-juba-taena-oma-veebisaidil-kasutada","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/suurepaerased-css-i-lehtede-ueleminekud-mida-saate-juba-taena-oma-veebisaidil-kasutada\/","title":{"rendered":"Suurep\u00e4rased CSS-i lehtede \u00fcleminekud, mida saate juba t\u00e4na oma veebisaidil kasutada\u00a0"},"content":{"rendered":"\n

CSS-animatsioonid viitavad animatsioonidele, mida kasutatakse HTML-i elementide manipuleerimiseks ja r\u00f5hutamiseks CSS-i abil \u2013 st JavaScripti v\u00e4he v\u00f5i \u00fcldse mitte ja kindlasti pole vaja Flashi.<\/p>\n

Nagu paljud disainerid teavad, v\u00f5ib JavaScripti ja Flashi kasutamine animatsioonide jaoks olla tarbetult ressursimahukas ning Flashi puhul mitte eriti turvaline.<\/p>\n

CSS-i lehtede \u00fcleminekud on animeeritud \u00fcleminekud lehtede vahel, mida kasutatakse selleks, et anda veebisaitidele lisav\u00e4\u00e4rtus, mis eristab neid kui tipptasemel ja head sirvimist v\u00e4\u00e4rt. Ja kui neid \u00f5igesti kasutada, ei anna need mitte ainult elavust, vaid aitavad ka navigeerimisel palju kaasa.<\/p>\n

See artikkel, mille on loonud meie meeskond saidil wpDataTables (parim WordPressi tabeli pistikprogramm<\/a> ), k\u00e4sitleb seda, mida peate teadma CSS-i lehtede \u00fcleminekute ja nende toimimise kohta, ning loetleb m\u00f5ned parimad, mida saate praegu kasutada. Lisateabe saamiseks kerige alla.<\/p>\n

CSS-i lehe\u00fcleminekute lisamise t\u00e4htsus<\/h2>\n

Kuigi v\u00f5ib tunduda, et animatsioon<\/a> ei oma animeeritud veebisaidi<\/a> loomisel nii suurt t\u00e4htsust \u2013 v\u00f5i v\u00e4hemalt mitte nii palju kui saidi reageerimisv\u00f5ime ja p\u00f5hiline kasutatavus \u2013, on t\u00f5de see, et animatsioon v\u00f5ib muuta eduka ja kaasahaarava sisu vahel. koht ja kogu puur.<\/p>\n

Lehtede \u00fcleminekud on tava, mida veebidisainis sageli eiratakse, ja sellest on kahju, arvestades nende m\u00f5ju. Need v\u00f5ivad muuta kogu veebisaidi tunnet ja k\u00fclastajate kogemust sellega<\/a>.<\/p>\n

Paljud disainerid kalduvad v\u00e4ltima animatsioone, kuna usuvad, et nad s\u00f6\u00f6vad ressursse, mis t\u00f5mbavad veebisaidi alla ja muudavad selle aeglaseks. See juhtub ainult siis, kui animatsioone pole \u00f5igesti rakendatud, ja siin muudavad CSS-i lehe \u00fcleminekud m\u00e4ngu.<\/p>\n

Need on loomingulised ja t\u00f5husad viisid oma veebisaidile sujuvate animatsioonide lisamiseks. CSS on v\u00f5imas t\u00f6\u00f6riist, mis aitab veebisaidil oma isikup\u00e4ra kujundada. Altpoolt leiate loetelu n\u00e4idetest, mis peaksid inspireerima teid oma saidi jaoks kasutama CSS-i lehtede \u00fcleminekuid:<\/p>\n

N\u00e4ited CSS-i lehe\u00fcleminekutest<\/h2>\n

Lahe paigutus uhkete lehe\u00fcleminekute ja l\u00f5uendiv\u00e4lise men\u00fc\u00fcga<\/h3>\n

\"Suurep\u00e4rased<\/a><\/p>\n

Selle veebilehe \u00fclemineku paigutuse l\u00f5i Nikolai Talanov ja see n\u00e4eb hea v\u00e4lja ainult t\u00e4isekraanil suurel t\u00f6\u00f6laual. Algne idee viidi ellu HTML5 l\u00f5uendis, kuid Nikolay on selle nutikalt kohandanud CSS-i versiooniks.<\/p>\n

CSS-i lehe \u00fcleminekud n\u00e4evad suurep\u00e4rased v\u00e4lja, kuid negatiivne k\u00fclg on see, et kui teie saidi z-indeksi v\u00e4\u00e4rtused pole \u00f5igesti konfigureeritud, v\u00f5ivad kasutajad kogeda v\u00e4risemist v\u00f5i kadumist.<\/p>\n

folio.\u00fcleminekud<\/strong><\/h3>\n

\"Suurep\u00e4rased<\/a><\/p>\n

Selle lehe \u00fclemineku l\u00f5i ja k\u00e4ivitas Foliodot ning see on \u00fcks lemmikuid turul. Sellel on karbist v\u00e4ljas leht ja jaotiste \u00fcleminekud, mis on lihtsalt ilusad. Need n\u00e4eksid suurep\u00e4rased v\u00e4lja igal veebisaidil, olenemata selle t\u00fc\u00fcbist.<\/p>\n

Lehek\u00fcljed ja paigutus k\u00e4rbitud taustaosadega<\/strong><\/h3>\n

\"Suurep\u00e4rased<\/a><\/p>\n

Nikolai Talanov tuli v\u00e4lja \u00fche parima CSS-i lehe \u00fcleminekuga, mida n\u00e4ete. Talanov koostas selle kontseptsiooni, pidades silmas, et paljud inimesed kasutavad saidil navigeerimiseks oma klaviatuuri, kl\u00f5psates lihtsalt \u00fcles ja alla.<\/p>\n

Lehtede \u00fcleminekud toimivad sel viisil h\u00e4sti ja on ka \u00fcsna tundlikud. Siiski on ka m\u00f5ningaid j\u00f5udlusega probleeme. Sisu laadimine kipub alguses aeglasemalt ja kasutajatel v\u00f5ib palju sisuga lehe avamisel tekkida probleeme.<\/p>\n

Liuguri \u00fcleminekud<\/strong><\/h3>\n

\"Suurep\u00e4rased<\/a><\/p>\n

MirkoZoric l\u00f5i need CSS-i lehtede \u00fcleminekud Swiperi stiili uurides. Ta kasutab populaarset parallaksiefekti ja m\u00e4ngib filtritega, et saada h\u00e4mmastavat efekti.<\/p>\n

Pulgakommi \u00fcleminek<\/strong><\/h3>\n

\"Suurep\u00e4rased<\/a><\/p>\n

Lollipop, nagu Jeff McCarthy oma lehe \u00fcleminekut nimetas, sarnaneb Android 5.0 v\u00e4limusega. Lehe \u00fcleminek imiteerib Android 5.0 Lollipopi sahtli\/kausta animatsiooni, mis kasutab ringikujulist pulgakommi sarnast efekti.<\/p>\n

kontekst<\/strong><\/h3>\n

\"Suurep\u00e4rased<\/a><\/p>\n

Konteksti l\u00f5i Hakim El Hattab ja see on \u00fcsna lihtne \u2013 see on konteksti nihke \u00fcleminek, mis r\u00f5hutab, et lehe kontekst on muutunud. T\u00f5en\u00e4oliselt olete seda t\u00fc\u00fcpi \u00fcleminekuga harjunud, kui olete kasutanud seadet, mis k\u00e4itab iOS-i.<\/p>\n

Lahe paigutus koos keerulise aheldatava animatsiooniga<\/strong><\/h3>\n

\"Suurep\u00e4rased<\/a><\/p>\n

Veel \u00fcks NikolayTelanovilt, see lehe \u00fcleminek p\u00f5hineb satelliitveebisaidi protot\u00fc\u00fcbil<\/a> ja see luuakse kahe JavaScripti klassi lisamise ja lihtsa h\u00f5ljutusega. See on demofunktsioon ja sellel on aheldamisanimatsioonid.<\/p>\n

See on tundlik \u00fcleminek, mida on ka SCSS-i j\u00e4rgi lihtne hooldada.<\/p>\n

Hei, kas teadsite, et ka andmed v\u00f5ivad olla ilusad?<\/h3>\n

wpDataTables<\/a> saab seda nii teha. Sellel on hea p\u00f5hjus, miks see on WordPressi pistikprogramm nr 1 reageerivate tabelite ja diagrammide loomiseks.<\/p>\n

\"Suurep\u00e4rased<\/a><\/p>\n

Tegelik n\u00e4ide wpDataTabelitest looduses<\/p>\n

Ja midagi sellist on v\u00e4ga lihtne teha:<\/p>\n

    \n
  1. Esitate tabeli andmed<\/li>\n
  2. Seadistage ja kohandage seda<\/li>\n
  3. Avaldage see postituses v\u00f5i lehel<\/li>\n<\/ol>\n

    Ja see pole mitte ainult ilus, vaid ka praktiline. Saate teha suuri kuni miljonite ridadega<\/a> tabeleid v\u00f5i kasutada t\u00e4psemaid filtreid ja otsingut<\/a> v\u00f5i muuta see redigeeritavaks<\/a>.<\/p>\n

    "Jah, aga mulle lihtsalt meeldib Excel liiga palju ja veebisaitidel pole midagi sellist." Jah, on k\u00fcll. V\u00f5ite kasutada tingimusvormingut<\/a> nagu Excelis v\u00f5i Google’i arvutustabelites.<\/p>\n

    Kas ma \u00fctlesin teile, et saate oma andmetega ka diagramme luua ?<\/a> Ja see on vaid v\u00e4ike osa. Teie jaoks on palju muid funktsioone<\/a>.<\/p>\n

    Uberi-laadsed teksti\u00fcleminekud<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Nicolas Engler l\u00f5i need t\u00f5lked, mis meenutavad neid, mida n\u00e4ete Uberis. Need l\u00e4hevad \u00fchelt slaidilt teisele v\u00e4ga sujuvalt ja sobivad suurep\u00e4raselt lihtsate liideste jaoks.<\/p>\n

    Jaotatud 3D-karussell<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Nagu nimigi viitab, tuli Paul Noble v\u00e4lja huvitava ideega, mis kasutab karussellimustrit, ainult et see p\u00f5hineb jagatud paneeli \u00fcleminekul puu erinevates m\u00f5\u00f5tmetes. See on kindlasti \u00fcks enim kasutatud CSS-i lehtede \u00fclemineku stiile.<\/p>\n

    N\u00e4iv mitmekihiline leht paljastab efekti<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Mehmet Burak Erman on selle kauni lehe paljastamise efekti looja. See ehitati mitmekihilises stiilis HTML-i, CSS-i ja JavaScripti abil. Praegu \u00fchildub lehe \u00fcleminek Chrome’i, Firefoxi, Opera ja Safariga.<\/p>\n

    Paanide lehe \u00fcleminek (CSS)<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Milan Ricoul l\u00f5i selle paanide lehe \u00fclemineku CSS-i abil ja see on p\u00e4lvinud suure tunnustuse. Milan l\u00f5i selle klassikalise HTML-i, CSS-i ja JavaScripti kombinatsiooni abil ning see \u00fchildub enamiku brauseritega nagu Mehmet Ermani oma.<\/p>\n

    Artikli \u00fclemineku leht<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    See on \u00fcks Muna loodud CSS-i lehtede \u00fcleminekutest. See oli algselt inspireeritud ReAlign 2-st Dribble veebisaidil, kasutades CSS-i, kuid see p\u00f5hineb ka HTML-il ja JavaScriptil. V\u00f5rreldes muude veebilehtede \u00fcleminekutega \u00fchildub see ka Microsoft Edge’iga.<\/p>\n

    Lihtne lehe \u00fcleminek<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Selle lehe \u00fclemineku kohta pole palju \u00f6elda \u2013 see on t\u00e4pselt nii, nagu seda nimetatakse: lihtne. Selle l\u00f5i ktsn ja see p\u00f5hineb HTML-Pugil, CSS\/SCSS-il ja JavaScriptil koos vue.js-iga. Kui otsite midagi lihtsat, kuid muljetavaldavat, peaksite seda proovima.<\/p>\n

    Sisu animatsiooni (ja men\u00fc\u00fc) kuvamine<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Tobias Glaus on selle lihtsa sisu- ja men\u00fc\u00fcanimatsiooni looja. See p\u00f5hineb lihtsal paljastamisefektil, kuid on sama t\u00f5hus, kui see peaks olema. Kui soovite lihtsalt lihtsat CSS-i lehe \u00fcleminekut selle stiilse paljastamisstiiliga, on see \u00fcks teie parimaid valikuid.<\/p>\n

    Kaardilehe \u00fcleminekuefekti laiendamine<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    See on osa koodist, mille kallal Rachel Smith veel t\u00f6\u00f6tab, kuid sellel on suur potentsiaal. See ei ole valmis \u00fcleminekuks kasutamiseks, kuid selle looja on selle testimiseks pakkunud. P\u00e4rast l\u00f5petamist on \u00fcleminek kasutatav brauseri\u00fcleselt ja juurdep\u00e4\u00e4setav k\u00f5igilt platvormidelt.<\/p>\n

    Lehek\u00fclje \u00fcleminekud<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    See on MergimUjkani projekt ja \u00fcleminek koosneb lihtsast ekraanist nuppude\/men\u00fc\u00fcdega navigeerimiseks. Kui m\u00e4letate, kuidas vanad telerid l\u00fclitusid v\u00e4lja, v\u00e4hendades ekraani suurust \u00f5hukeseks jooneks, siis teate juba, kuidas see \u00fcleminek v\u00e4lja n\u00e4eb.<\/p>\n

    Need, kes vajavad vanaaegseid CSS-i lehtede \u00fcleminekuid, peaksid seda proovima.<\/p>\n

    Pisipildi \u00fcleminek t\u00e4isekraanil lehele<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    See sujuv \u00fcleminek pisipildilt t\u00e4isekraanil kuvatavale lehele on h\u00e4davajalik. Steve Gardner kasutas selle koostamiseks CSS-animatsioone ja Angular. Seda kasutades saate mis tahes pisipildi t\u00e4issuuruses taustaks laiendada.<\/p>\n

    Lehek\u00fclje \u00fclemineku laadija<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    ArsenZbidniakov m\u00f5tles v\u00e4lja selle eellaadija kontseptsiooni, mida saab kasutada iga kord, kui avate veebisaidil uue lehe. See koosneb SVG ringlaadijast, millel on lisatud morfismiefekt.<\/p>\n

    See CSS-i lehe \u00fcleminek toimiks h\u00e4sti n\u00e4gemuslikel veebisaitidel, millel on palju multimeediumisisu.<\/p>\n

    \u00dche lehek\u00fclje navigeerimise CSS-men\u00fc\u00fc<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Alberto Hartzet l\u00f5i selle \u00fchelehek\u00fcljelise CSS<\/a> -i navigeerimismen\u00fc\u00fc, mis sisaldab m\u00f5nda jaotist ja puhtaid CSS-i \u00fcleminekuid. See sobib lihtsamate veebisaitide, portfellide ja muude saitide jaoks, mis t\u00f6\u00f6tavad h\u00e4sti \u00fchelehelise kujundusega.<\/p>\n

    Reageeri animeeritud lehe\u00fcleminekutele<\/strong><\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Sarah Drasner l\u00f5i nende CSS-i lehtede \u00fcleminekute jaoks v\u00e4ikese demo. Ta l\u00f5i selle GreenSocki ja SVG abil. Lehtede \u00fcleminekud Reactis toimivad sujuvalt ja n\u00e4evad samal ajal suurep\u00e4rased v\u00e4lja, nii et proovige seda.<\/p>\n

    Materjali disaini \u00fcleminek<\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Nii selle \u00fclemineku stiili kui ka animatsiooni on teinud t\u00e4ielikult CSS-is David Marland. See t\u00f6\u00f6tab sujuvalt ja sisaldab klasside lisamiseks JavaScripti. \u00dclemineku saab peatada, kuni sisu asendatakse. See on kaheetapiline animatsioon.<\/p>\n

    Puhas CSS \u00dche lehe vertikaalne navigeerimine<\/h3>\n

    \"Suurep\u00e4rased<\/a><\/p>\n

    Viimane meie CSS-i lehtede \u00fcleminekute loendis, sellel Alberto Hartzeti puhtal CSS-i vertikaalse navigeerimise \u00fcleminekul on klassikaline \u00fcheleheliste veebisaitide paigutus. J\u00e4llegi on \u00fcleminek v\u00e4ga lihtne, kuid lisab veebisaidile kena lihvi.<\/p>\n

    M\u00f5tted nende CSS-i lehtede \u00fcleminekute kohta<\/h3>\n

    Selle valdkonna trendidega kursis p\u00fcsimiseks on konkurents suur, mist\u00f5ttu pole imestada, miks nii lihtsa asja, nagu lehele \u00fcleminek, otsustamine on nii keeruline.<\/p>\n

    CSS-i lehtede \u00fcleminekud v\u00f5imaldavad teil h\u00f5lpsasti oma veebisaiti animeerida, ilma et see laadiks aeglaselt. Lisaks edendab see v\u00e4rskemat v\u00e4limust ja lisab igale veebisaidile selle professionaalsuse puudutuse.<\/p>\n

    CSS-i lehtede \u00fcleminekud on viimase paari aasta jooksul palju edasi arenenud ja kasutajad peaksid neid \u00e4ra kasutama, et oma UX-i t\u00e4iustada ja kasutajaid r\u00f5\u00f5msalt kl\u00f5psata v\u00f5i ringi kerida.<\/p>\n

    Kui teile meeldis lugeda seda artiklit CSS-i lehtede \u00fcleminekute kohta, peaksite seda CSS-i teksti s\u00e4raefektide<\/a> kohta vaatama .<\/p>\n

    Kirjutasime ka m\u00f5nest seotud teemast, n\u00e4iteks CSS-i mobiilimen\u00fc\u00fcst<\/a>, HTML-i otsingukastist<\/a>, CSS-i pildigaleriist<\/a>, CSS-i redaktorist<\/a> ja CSS-pildi h\u00f5ljutusefektidest<\/a>.<\/p>\n

    : wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

    CSS-i lehtede \u00fcleminekud on viimase paari aasta jooksul kaugele j\u00f5udnud ja kasutajad peaksid neid \u00e4ra kasutama, et t\u00e4iustada oma kasutajakogemust ja hoida kasutajaid \u00f5nnelikuna<\/p>\n","protected":false},"author":1,"featured_media":181788,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[718,749,905,894,916,842,863],"tags":[1165],"class_list":["post-227509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-avatud-laehtekoodiga","category-css-4","category-kood","category-muud","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/227509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=227509"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/227509\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/181788"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=227509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=227509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=227509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}