Muna ci gaba tare da zagaye na CSS da HTML code waɗanda za a iya aiwatar da su akan rukunin yanar gizon mu don ba shi wannan taɓawa ta musamman wacce za mu bambanta ta da sauran. Godiya ga ikon + c tare da ikon + v zamu iya kasance a cikin lambar hannunmu wanda zai sanya yanar gizo a shirye da za a buga a ci gaba bayan shafe kwanaki ko makonni a gwaji.
Yanzu lokaci ne na sliders 27 a cikin HTML da CSS waɗanda zasu ba mu damar shirya wannan sararin wanda yawanci muke haɗa abubuwan da yawa a cikin pian pixels murabba'i ɗaya. Waɗannan darje-zane suna kan layi, kwatancen, cikakken allo, mai amsawa kuma mafi sauki, amma a lokaci guda kuma mai matukar kyau. Za mu tafi tare da silaji 27 wadanda ba za su bar kowa ba, musamman ma abokin ciniki ko mai amfani da ya ziyarci gidan yanar gizonku don karanta abubuwan da ke ciki, siyan samfur ko kuma kawai amfani da silar kwatantawa don kwatanta hoto kafin da bayan.
Allo akan kati
Wani darjewa mai ilmi cikin HTML da CSS wanda ke ma'amala da su dauki jerin katunan zuwa gidan yanar gizon ku wanda aka wuce daga ɗayan zuwa wani tare da rayarwa tare da babban salo. Daidai ne rayarwa da ɗan tudu na baya waɗanda ke ba da wannan dabara ta hankali ga wannan lambar HTML da CSS wacce ita ma ta fito don ɗan JavaScript. Kyakkyawan kalma ce don nuna wannan silar mai inganci.
Bayanin katin darjewa
Wannan silsilar katin bayanan kuma lambar ce a cikin HTML, CSS da JavaScript. Yana da kusan game jerin katunan hakan baya jan hankali sosai ga rayarwar, kodayake saukinsa shine mafi girman ƙimar ta. Wani darjewa don la'akari daga wannan jeren.
Kwatancen hoto mai kwatantawa
Wannan darjewar shine Na da matukar amfani Kuma tabbas kun gan shi akan ɗakunan yanar gizo inda a gaba da bayan hotuna ana kwatanta su da sandar tsaye wacce ke zanawa a kwance. Babban taimako ne ga kwatancen, don haka muka sanya shi ɗaya daga cikin mahimman abubuwan a cikin wannan jerin sliders.
Kwatancen kwatankwacin ba tare da JavaScript ba
Babban ingancin wannan darjewar shine ya zo ba tare da JavaScript ba, don haka kawai zaku aiwatar da lambar CSS da HTML akan gidan yanar gizon ku don sake yin kwatancen. Dole ne kayi amfani da akwatin baƙin a ƙasan hoton don zame shi daga wannan gefe zuwa wancan don ganin kwatancen hoton. Ba azanci bane kamar na baya, amma yana da amfani sosai ba tare da JavaScript ba.
Matsakaici mai kwatancen hoto mai hawa uku
Sunansa ya faɗi shi duka, mai silar hoto wannan ba ka damar kwatanta har zuwa uku a lokaci guda. Misalin da aka bayar shine daya don ganin kai a bayyane, wani kuma don nuna tsokoki da kuma wani darjewa don ganin kasusuwa. Yana amfani da HTML, CSS da JavaScript don aikinsa.
Vanilla JS Zanen Hoton
Wani kwatancen hoton kwatancen tare da babban maballin da abin da za a zame hoton daga wannan gefe zuwa wancan. Mai ƙarancin ra'ayi, tare da ƙaramin JavaScript da kuma ƙarewar gani sosai. Ofaya daga cikin mafi ban mamaki don kwatanta hotuna.
Raba allo a hankula
Este kwatancen hoto Envato Tuts ne ya kirkireshi kuma yana da banbanci cewa an sanya darjewar a hankali don haifar da wasu nau'ikan abubuwan jin dadi yayin kwatanta hotuna biyu. Yana amfani da JavaScript, CSS da HTML don zama silare mai kwatankwacin inganci.
Cikakken silar allo
Mun shiga wani ɓangare na masu siyen allo don saduwa da su Rikodin Gyarawa wanda yake da yanayi na miƙa mulki aiwatarwa ta hanyar motsa rai mai tasirin gaske. Idan kun shirya nuna hotuna a cikin cikakken allon kuma kuna wucewa sosai, sanya lamba a cikin JavaScript, CSS da HTML.
Takamaiman kwance tare da parallax
Ga magoya bayan parallax sakamako wannan silar tare da Swiper.js, HTML da CSS. Baya ga iya zamewa tare da maɓallai biyu da ke gefen kowane gefe, a gefen dama muna da ƙaramin dukkan hotunan cikakken carousel. Bambanci mai kyau kuma mai inganci wanda ba zai bar duk wanda ya ziyarci gidan yanar gizon mu ba.
Siffar 3D hangen nesa
Mai siye mai karɓa cewa bi alamun motsi linzamin kwamfuta Yana da ikon haifar da babban tasirin hangen nesa wanda zai iya haifar da rikicewar rikicewa a cikin baƙon. Idan kun san yadda ake amfani dashi yadda yakamata zaku iya ba wannan asalin asali da dabara ta hanyar yanar gizo. JavaScript, CSS da lambar HTML ba su ɓace ba.
Jarumi cikakken allon silifa
Cikakken hoton gwarzo na allo a cikin HTML, CSS da JavaScript. Da wani billa sakamako a cikin kowane motsi hakan yana bashi wannan kuma gabaɗaya muna fuskantar ingancin cikakken silifik ɗin allo kamar sauran jerin.
VELO.JS darjewa tare da kan iyakoki
Ofaya daga cikin abubuwan karin haske azaman cikakken silar allo tare da motsa rai mai ban sha'awa mai sauƙi. Muna ba da shawarar ka je ka gan shi a cikin aiki don fara tunanin yadda za a aiwatar da shi akan yanar gizo. Yi amfani da tasirin gudu Don haɓaka wannan rayarwar da ke amfani da maɓallin kibiya, danna cikin kewayawa har ma da gungurawa, Kawai cikakke.
Amsa CSS mai zamewa tsaye tare da takaitaccen hotuna
Muna matsawa zuwa silaid CSS mai amsawa don wayar hannu babban inganci kamar wannan. Kuna da jerin takaitaccen siffofi na dama wanda lokacin da aka danna zai fara rayarwa a cikin faɗuwa ta tsaye. Babban sakamako wanda ke amfani da CSS kawai don barin mai siye da mafi kyawun wannan jerin.
Hoton silifa mai lankwasa hoto
Sauran Mai sifar hoto mai amsawa da aka yi tare da JavaScript kuma cewa ya fi sauki don zama kyakkyawa. Gajere, mai sauƙi da ƙarami kaɗan tare da komai sama da wannan. Yana da matsayinsa a cikin wannan jerin Flexbox sliders.
Bugun motsi tare da masu tace SVG
Gwajin da yayi daidai da sakamakon motsi motsi kowane lokaci zamewa an kunna. Yana amfani da SVG Gaussian blur filter da wasu maɓallan animation CSS. Lambar da aka yi amfani da ita a cikin JavaScript cikakke ne don misalin da aka bayar da kuma aikin siliki.
Mai siye mai rai
Mai siye mai rai m tare da JavaScript, HTML da CSS. Muna da kibiyoyi a gefen dama wanda zai bamu damar wucewa ta cikin hotunan da suka samo asali ta hanyar rayarwa mai kayatarwa. Ana samun babban sakamako a cikin kowane nunin faifai don sanya kansa fice. Very halin yanzu a cikin rayarwa.
Siffar hoto tare da tsarin SVG
Wani ɗayan waɗannan gwaje-gwajen da yayi ƙoƙari kawo alamu na svg don ƙirƙirar wasu hotunan abin rufe fuska don silar CSS. Yana samar da sakamako mai rikitarwa sosai tare da babban ƙarshe. Wani daga waɗancan silan ɗin don tsokanar da mai kyau a cikin baƙon gidan yanar gizon mu.
Mai sauƙi mai siye
A darjewa da daya fiye da fitaccen animation wannan yana ba da tasirin tasirin duk lokacin da muka danna kan gunkin don zamewa sabon hoto. Anyi shi a cikin HTML, CSS da JavaScript ya zama wani silale na hoto.
Tsantsan CSS
Wani daga mafi sauki darjewa kuma wancan shine tsarkakakken CSS. Ofaya daga cikin fa'idodi sa a cikin kasa hagu jerin dige hakan zai zama madannin don isa kowane ɗayan hotunan da zasu wuce gabanmu ba tare da wani motsi na musamman ba.
Cupcakes kawai CSS slider
El mafi dadi darjewa a jerin kuma cewa yana cikin CSS da HTML kawai. Yana ɗaya daga cikin na musamman na duka jerin don a gefen dama akwai bambancin bambancin wainar da kek. Danna kan ɗayan kuma cupcake ya bayyana tare da rayarwa mai ban mamaki wanda ya ƙare cikin sakamako mai girma. Daya daga cikin mafi kyau ba tare da wata shakka ba.
Tasirin tashin hankali
Daya daga cikin mafi kyawun siladi a cikin motsa jiki kuma menene yana sarrafa mamakinmu a farkon canji. Daga farkon lokacin da tashin hankali ya tashi, HTML, CSS da lambar JavaScript sun ba mu mamaki. Wani na mafi kyau a cikin ƙaramin taɓawa da yake bayarwa.
Yanki slider
Un sauya darjewa wanda ke amfani da ajin kara kara kuma wannan yana tattare da raye-raye masu santsi don zama ɗayan waɗanda akafi so akan wannan jerin. Idan kana son rarrabe kanka a cikin sigar wayar hannu ta gidan yanar gizo, yana ɗaya daga cikin abubuwan mahimmanci. Babban aiki na gani.
Parallax New York Slider
Daya daga cikin manyan fa'idodi na wannan parallax slider a cikin CSS shine cewa ana iya daidaita shi da yawa. Wannan yana nufin cewa zaku iya canza font, girman sa, launinsa da kuma saurin motsawa. Harafin farko na kowane birni a cikin sabon tsararren tsararren JavaScript ya bayyana akan sabon silaid. Wani daga mahimmin siyeda na wannan post.
Nunin faifai
Tare da styleananan salon wannan dariyar an gabatar da ita wanda kowane ɓangare na hoton yake fitowa tare da kowane zamewa. Creativeirƙiri mai mahimmanci kuma ya bambanta da abin da aka gani a cikin jerin slider kuma hakan yana tsaye a wurin sa.
Zamewa tare da tasirin tasiri
Un babban sakamako mai cikakken allo tare da launuka masu launi don samun dukkan ruwanta. JavaScript, HTML da CSS don wani silale mai tasirin ɗauke ido.
Zamewa tare da samfotin hoto
Darjewa GSAP tare da samfoti na nunin faifai na gaba za a gabatar da shi ga mai amfani. Cikakke don yin tallan kayan kawa akan gidan yanar gizo na zane ko zane.
Canjin miji
Mun ƙare jerin tare da mai siye mai inganci mai tasiri tare da tasirin bam da kuma jerin raye-raye waɗanda ke samun wannan taɓawa ta musamman akan gidan yanar gizon mu. Ana iya kunna sakamako na parallax.
Kada ku rasa wannan wani jerin lambar CSS don maballin.
Yayi kyau wannan post din, na gode sosai don rabawa. Ya tafi zuwa ga waɗanda aka fi so kai tsaye ba tsayawa.
Barka da warhaka.