Siqhubeka nomjikelezo we-CSS nekhodi ye-HTML engasetshenziswa kuwebhusayithi yethu ukuyinikeza lokho kuthinta okukhethekile okungahlukanisa ngayo nokunye. Ngenxa yokulawulwa + c kanye ne + v control esingakwazi ikhodi yethu yesandla ezokwenza iwebhu ilungele ukushicilelwa ngentuthuko ngemuva kokuchitha izinsuku noma amasonto ekuhlolweni.
Manje yisikhathi sama-slider angama-27 ku-HTML naku-CSS esizosivumela ukuthi silungiselele leso sikhala esivame ukuhlanganisa okuqukethwe okuningi kumaphikseli ambalwa aphindwe kabili. Lezi zilayishi zisukela ekhadini, ukuqhathanisa, isihenqo esigcwele, iyaphendula futhi elula, kepha ngasikhathi sinye futhi yinhle kakhulu. Sihamba ngezilayida ezingama-27 ezingeke zishiye noma ngubani engenandaba, ikakhulukazi ikhasimende noma umsebenzisi odlula kuwebhusayithi yakho afunde okuqukethwe, athenge umkhiqizo noma asebenzise isilayidi sokuqhathanisa ukuqhathanisa isithombe ngaphambi nangemuva.
Izikrini kumakhadi
Isilayida esinembile ku-HTML naku-CSS esisebenzisana naso thatha uchungechunge lwamakhadi kuwebhusayithi yakho ezidluliswa zisuka komunye ziye komunye nge-animation enesitayela esihle. Impela ukugqwayiza ne-gradient yangemuva okunikeza lokhu kuthinta okucashile kule khodi ye-HTML ne-CSS nayo evelela iJavaScript encane. Lihle igama eliveza lesi silayida sekhwalithi.
Isilayida sekhadi lemininingwane
Lesi silayida sekhadi lolwazi siyikhodi nge-HTML, CSS neJavaScript. Kungenxa yokuthi uchungechunge lwamakhadi lokho akuhehi ukunakwa okuningi ngokugqwayiza, yize kulula kwayo kungokubaluleka kwayo okukhulu. Esinye isilayidi esizosicabangela kulolu hlu.
Isilayida sokuqhathanisa isithombe
Lesi silayida Kusizo olukhulu Futhi ngokuqinisekile ukubonile kunqwaba yamawebhusayithi lapho izithombe zangaphambi nangemva kwazo ziqhathaniswa nebha emile eshelela ngokuvundlile. Kuwusizo olukhulu ekuqhathaniseni, ngakho-ke sikwenze kwaba okubalulekile kulolu hlu lwezilayida.
Isilayida sokuqhathanisa ngaphandle kweJavaScript
Ikhwalithi enhle yalesi slider yilokho iza ngaphandle kweJavaScript, ngakho-ke kuzofanele usebenzise kuphela ikhodi ye-CSS ne-HTML kuwebhusayithi yakho ukuze uthole okunye ukuqhathanisa. Kuzofanele usebenzise ibhokisi elimnyama ezansi kwesithombe ukusilayida ukusuka kolunye uhlangothi kuya kolunye ukubona ukuqhathanisa kwesithombe. Hhayi enembile njengangaphambili, kepha ilusizo kakhulu ngaphandle kweJavaScript.
Isilayida sesithombe esinezitezi ezintathu
Igama layo likusho konke, isilayida sesithombe leso ikuvumela ukuthi uqhathanise kuze kube kathathu ngasikhathi. Isibonelo esinikeziwe ngesokubona ikhanda kuphrofayili, elinye ukukhombisa imisipha kanye nesinye isilayida ukubona amathambo. Isebenzisa i-HTML, CSS neJavaScript ekusebenzeni kwayo.
I-Vanilla JS Image Slider
Esinye isilayida sokuqhathanisa ngenkinobho enkulu ongasilayida ngayo isithombe kusuka kolunye uhlangothi kuya kolunye. I-Minimalist, eneJavaScript encane nesiphetho esihle sokubuka. Enye yeziteleka kakhulu ukuqhathanisa izithombe.
Hlukanisa isikrini ngokulandelana
Este isilayida sokuqhathanisa isithombe Idalwe yi-Envato Tuts futhi inokwehluka kokuthi isilayida simiswe ngokulandelana ukudala ezinye izinhlobo zemizwa lapho kuqhathaniswa izithombe ezimbili. Isebenzisa iJavaScript, i-CSS ne-HTML ukuze ibe yisilayida sokuqhathanisa esezingeni eliphakeme.
Isilayida esigcwele
Sifike engxenyeni yezilayidi ezigcwele zesikrini ukuhlangana nazo Islider Transition esibonakala ngenguquko kwenziwa ngopopayi womphumela omuhle. Uma uhlela ukukhombisa izithombe kusikrini esigcwele nokuthi udlula ngokucophelela, faka ikhodi kuJavaScript, CSS naku-HTML.
Isilayida esivundlile esine-parallax
Ngokuba abalandeli bomphumela we-parallax lesi silayida ngeSwiper.js, HTML ne-CSS. Ngaphandle kokukwazi ukuslayida ngezinkinobho ezimbili ezitholakala ohlangothini ngalunye, ngakwesokunene sinazo zonke izithombe ze-carousel ephelele. Isilayida esibukwayo esihlukile nesisezingeni eliphakeme esingeke sishiye noma ngubani ovakashela iwebhusayithi yethu engenandaba.
Smooth 3D ngombono isinciphisi
Isilayida esiphendulayo ukuthi landela ukunyakaza kwesikhombi igundane. Iyakwazi ukudala umphumela omuhle wombono ongaholela emizweni exubile esivakashini. Uma wazi ukuthi ungayisebenzisa kanjani kahle, unganikeza lokho kuthinta kwangempela nokucashile kuwebhusayithi yethu. Ikhodi yeJavaScript, CSS ne-HTML ayilahlekile.
Isilayida esigcwele samaqhawe
Isilayida sesithombe esigcwele seqhawe lesikrini ku-HTML, CSS nakuJavaScript. Yiba ne- bounce effect kuzo zonke izithombe lokho kukunika lokho futhi ngokujwayelekile sibhekene nesilayidi esigcwele esigcwele sekhwalithi njengalo lonke uhlu.
Isilayida seVELO.JS esinemingcele
Okunye okuvelele njengesilayida esigcwele sesikrini esine-animation yokuguqula emnandi nje. Sincoma ukuthi uye ukuyibona isebenza ukuze uqale ukucabanga ukuthi ungayisebenzisa kanjani kuwebhu. Sebenzisa imiphumela yeVelocity Ukuze uthuthukise lokho kugqwayiza okusebenzisa izinkinobho zemicibisholo, chofoza ekuzulazuleni noma uskrole, Simply perfect.
Isilayida esime mpo se-CSS esinezithonjana
Siqhubekela kuma-slider I-CSS esabelayo yeselula ikhwalithi enhle njengale. Uzoba nochungechunge lwezithonjana ngakwesokudla lapho ucindezelwe kuzoqala ukugqwayiza ngokuwa okuqondile. Umphumela omuhle osebenzisa kuphela i-CSS ukushiya isilayida sokuhamba phambili kwalolu hlu.
I-slider yesithombe esishelelayo
Okunye Isilayida sokuphendula esenziwe ngeJavaScript nokuthi kungaphezu kokulula ukuba yinhle impela. Mfushane, elula futhi eyi-minimalist engenalutho ngaphezu kwalokhu. Inendawo yayo kulolu hlu lwama-slider e-Flexbox.
Ukufiphaza kokunyakaza ngezihlungi ze-SVG
Isilingo esilingisa umphumela we ukufiphaza kokunyakaza njalo lapho isilayidi iyasebenza. Isebenzisa isihlungi se-SVG Gaussian blur nezinye izinkinobho zokugqwayiza ze-CSS. Ikhodi esetshenziswe kuJavaScript yenzelwe isibonelo esinikeziwe nokusebenza kwesilayida.
Isilayida esigqwayizayo
Isilayida esigqwayizayo iphendula ngeJavaScript, HTML ne-CSS. Sinemicibisholo ngakwesokunene esivumela ukuthi sidlule ezithombeni ezivela ngopopayi oluhle futhi olufushane. Umphumela omuhle utholakala kusilayidi ngasinye ukuzenza ugqame. Okwamanje kakhulu kwizithombe.
Isilayida sesithombe esinamaphethini we-SVG
Enye yalezo zivivinyo ezizama phatha amaphethini we-svg ukwakha ezinye izithombe zemaski zesilayida se-CSS. Kwenza umphumela wokufiphaza oshaqisayo ngokuqedwa okuhle. Enye yalezo zilayidi zokuvusa imizwa emihle esivakashi sewebhusayithi yethu.
Isilayida esilula
Isilayida esinezinto ezingaphezu kwesisodwa izithombe ezivelele lokho kunikela ngomphumela wamaza njalo lapho sichofoza isithonjana ukusilayida isithombe esisha. Kwenziwe nge-HTML, CSS neJavaScript kuba esinye isilayida sesithombe.
Isilayidi se-CSS esimsulwa
Esinye sezilayidi ezilula okuyi-CSS emsulwa. Enye yezinzuzo zayo ukufaka ifayela le- ngezansi kwesobunxele uchungechunge lwamachashazi lokho kuzosebenza njengezinkinobho ukufinyelela isithombe ngasinye esizodlula phambi kwethu ngaphandle kokwenza izithombe ezikhethekile.
Amakhekhe kuphela isilayidi se-CSS
El isilayidi esimnandi kunazo zonke ohlwini nokuthi iku-CSS ne-HTML kuphela. Ingenye yezinto ezikhetheke kakhulu kulo lonke uhlu okufanele ibe ngasohlangothini lwesokudla ukuhluka okwehlukile kwamakhekhe. Chofoza okukodwa bese ikhekhe livela ngokugqwayiza okuhle okuphela ngomphumela omuhle wokubhabha. Enye yezinto ezinhle kakhulu ngaphandle kokungabaza.
Umphumela wokugqwayiza wesilayida
Esinye sezilayida ezinhle kakhulu ku-animation nokuthi yini ikwazi ukusimangaza ngoshintsho lokuqala. Kusukela ngomzuzu wokuqala lapho kuvela izithombe, ikhodi yayo ye-HTML, CSS neJavaScript isishiya simangele. Enye yezinto ezinhle kakhulu ekuthinteni okuncane okunikezayo.
Isilayida sesilayida
Un isilayidi soguquko esisebenzisa isigaba esilula sokungeza futhi lokho kubonakala ngokugqwayiza okubushelelezi kakhulu ukuze ube enye yezintandokazi ezikulolu hlu. Uma ufuna ukuzihlukanisa enguqulweni yeselula yewebhu, kungenye yezinto ezibalulekile. Kubonakala kahle kakhulu.
I-Parallax New York Slider
Enye yezinzuzo ezinkulu kulokhu Isilayidi se-parallax ku-CSS ukuthi kungenziwa egcizelele okuningi. Lokhu kusho ukuthi ungashintsha ifonti, usayizi wayo, umbala wayo nejubane lokugqwayiza. Uhlamvu lokuqala lwedolobha ngalinye ngentambo yamalungu afanayo yeJavaScript luvela kusilayidi esisha. Enye yezilayida ezibalulekile zalokhu okuthunyelwe.
Isilayidi siphuma
Nge isitayela esincane kakhulu le slider siyethulwa lapho ingxenye ngayinye yesithombe iphuma nesilayidi ngasinye. Idaleke kakhulu futhi yehlukile kulokho okubonwa ohlwini lwama-slider futhi emi endaweni yayo.
Isilayida esinomphumela wokuvuthwa
Un isilayida esigcwele isibuko esigcwele ngemibala eyisicaba ukuthola lonke ujusi wayo. IJavaScript, i-HTML ne-CSS yesinye isilayida esinomphumela odonsa amehlo.
Isilayida esinokubuka kuqala isithombe
Isinciphisi I-GSAP ngokubuka kuqala kwezilayidi ezilandelayo lokho kuzokwethulwa kumsebenzisi. Ilungele ukumodeliswa kuwebhusayithi yemfashini noma yokwakha.
Izilayida ushintsho
Siphetha uhlu ngo isilayida esezingeni eliphakeme esinomphumela we-bombastic kanye nochungechunge lokugqwayiza okuthola lokho kuthinta okukhethekile kuwebhusayithi yethu. Umphumela we-parallax ungenziwa usebenze.
Ungaphuthelwa yilokhu olunye uhlu lwamakhodi we-CSS izinkinobho.
Kuhle kakhulu lokhu okuthunyelwe, ngiyabonga kakhulu ngokwabelana. Iya ezintandokazini ngqo ingami.
Ngiyabingelela mlingani.