27 HTML eta CSS graduatzaileak zure webguneari ukitu berezi hori emateko

Gure webgunean ezar daitekeen CSS eta HTML kodeen txanda batekin jarraitzen dugu, gainerakoetatik bereizteko ukitu berezi hori emateko. + C kontrolari esker ahal dugun + v kontrolari esker gure esku daukagu ​​webgunea prest jarriko duen kodea proban egun edo asteak igaro ondoren garapenean argitaratzeko.

Orain da HTML eta CSS 27 graduatzaileen garaia, edukia normalean eduki karratu batzuetan pixel batzuetan integratu ohi dugun espazioa prestatzeko aukera emango digutenak. Irristailu hauek txartelean daude, konparatiboa, pantaila osokoa, sentikorra eta errazena, baina aldi berean oso dotorea ere bai. Inor axolagabe utziko ez duten 27 graduatzaileekin goaz, batez ere zure webgunetik pasatzen den bezeroa edo erabiltzailea edukia irakurtzeko, produktu bat erosteko edo, besterik gabe, irristailu konparatiboa erabiltzeko irudi bat aurretik eta ondoren alderatzeko.

Kartetan pantailak

Jorratzen duen HTML eta CSS irristailu oso intuitiboa eraman txartel batzuk zure webgunera batetik bestera estilo bikaineko animazioarekin pasatzen direnak. HTML eta CSS kode honi ukitu sotil hau ematen dioten animazioak eta atzeko gradienteak dira JavaScript pixka bat ere nabarmentzen dutenak. Dotorea da kalitate graduatzaile hau irudikatzeko hitza.

Informazio txartelaren graduatzailea

Informazio txartelen graduatzailea HTML, CSS eta Javascript-eko kodea ere bada. Buruzkoa da karta sorta bat horrek ez du arreta handirik erakartzen animaziorako, nahiz eta bere soiltasuna duen balio handiena. Zerrenda honetatik kontuan hartu beharreko beste graduatzailea.

Irudi graduatzailea konparatiboa

Irristailu hau da Erabilgarritasun handikoa Eta ziur aski, webgune ugaritan ikusi duzu, non argazkiak aurretik eta ondoren horizontalki irristatzen den barra bertikalarekin alderatzen diren. Konparazioak egiteko laguntza bikaina da, beraz, graduatzaileen zerrenda honetako funtsezkoenetariko bat bihurtzen dugu.

Javascript gabeko graduatzaile konparatiboa

Irristailu honen kalitate handia hori da JavaScript gabe dator, beraz, CSS eta HTML kodea inplementatu beharko dituzu zure webgunean beste konparazio bat egiteko. Irudiaren behealdeko lauki beltza erabili beharko duzu alde batetik bestera irristatzeko irudien konparazioa ikusteko. Ez aurrekoa bezain intuitiboa, baina oso erabilgarria JavaScript gabe.

Hiru geruzako irudi graduatzailea

Bere izenak dena dio, irudi graduatzailea hiru aldi berean alderatzeko aukera ematen du. Adibidea da burua profilean ikusteko beste bat, muskuluak erakusteko beste bat eta hezurrak ikusteko beste graduatzailea. Bere funtzionamendurako HTML, CSS eta JavaScript erabiltzen ditu.

Vanilla JS Irudi Irristailua

Beste irudi graduatzaile konparatiboa botoi handi batekin horrekin irudia alde batetik bestera irristatzeko. Minimalista, JavaScript gutxirekin eta akabera bisual bikaina duena. Irudiak alderatzeko deigarrienetakoa.

Zatitu pantaila diagonalean

Hau irudi graduatzailea konparatiboa Envato Tuts-ek sortu du eta graduatzailea diagonalean kokatuta dagoela beste irudi bi alderatzerakoan beste sentsazio mota batzuk eragiteko bereizketa du. JavaScript, CSS eta HTML erabiltzen ditu kalitate handiko graduatzaile konparatiboa izateko.

Pantaila osoko graduatzailea

Pantaila osoko graduatzaileen zatira iritsi gara Slider Trantsizioa trantsizio bat da efektu handiko animazio batek burutua. Irudiak pantaila osoan erakusteko asmoa baduzu eta kontu handiz pasatzen ari zarela, kodetu JavaScript, CSS eta HTML formatuan.

Paralajea duen graduatzaile horizontala

For the parallaxaren zaleek graduatzaile hau eragiten dute Swiper.js, HTML eta CSS zerbitzuekin. Alde bakoitzean kokatutako bi botoiekin irristatu ahal izateaz gain, eskuinaldean karrusel osoaren irudi guztiak miniaturaz ditugu. Gure webgunea bisitatzen duen edonori axolagabe utziko ez dion kalitate handiko ikusizko graduatzailea.

3D ikuspegiaren graduatzailea leuna

Erantzungarria den graduatzailea jarraitu erakuslearen mugimenduei sagua. Bisitariari sentsazio kontrajarriak sor ditzakeen ikuspegi efektu handia eragiteko gai da. Behar bezala erabiltzen badakizu gure webguneari ukitu original eta fin hori eman diezaiokezu. JavaScript, CSS eta HTML kodea ez dira falta.

Hero pantaila osoko graduatzailea

HTML, CSS eta Javascript pantaila osoko heroien irristailua. Izan errebote efektua animazio guztietan horrek ematen du hori eta, oro har, kalitatezko pantaila osoko graduatzailea dugu aurrean, gainerako zerrendak bezala.

VELO.JS graduatzailea ertzekin

Pantaila osoko irristailu nabarmenetako bat trantsizio animazio fantastikoarekin. Funtzionamenduan ikustera joatea gomendatzen dizugu, sarean nola ezarri pentsatzen hasteko. Erabili Abiadura efektuak Gezi-botoiak, nabigazio-klikak eta korritzeak erabiltzen dituen animazioa hobetzeko, besterik gabe, ezin hobea.

Erantzungarria den CSS graduatzaile bertikala irudi txikiekin

Irristailuetara igarotzen gara Mugikorretarako CSS sentikorra hau bezalako kalitate bikaina. Eskuinean irudi txikiak izango dituzu. Sakatuta, animazio bat eroriko da erorketa bertikalean. Efektu bikaina CSS bakarrik erabiltzen du zerrenda honetako onenen graduatzailea uzteko.

Irudi graduatzailea flexbox

Beste Javascript-ekin egindako irudi-graduatzailea eta nahiko dotorea izatea erraza dela. Laburra, sinplea eta minimalista hau baino ez duena. Bere lekua du Flexbox graduatzaileen zerrenda honetan.

Motion Blur SVG iragazkiekin

Efektuaren simulazioa egiten duen esperimentua mugimendua lausotu diapositiba bat den bakoitzean aktibatuta dago. SVG Gaussian lausotzeko iragazkia eta CSS animazio tekla batzuk erabiltzen ditu. Javascript-en erabiltzen den kodea emandako adibidea eta graduatzailearen funtzionalitatea da.

Animazio graduatzailea

Animazio graduatzailea JavaScript, HTML eta CSS-rekin erantzuten du. Eskuinaldean geziak ditugu, jatorrizko irudiak animazio dotore eta zehatz batekin igarotzeko aukera ematen dutenak. Diapositiba bakoitzean efektu handia lortzen da bere burua nabarmentzeko. Animazioetan oso aktuala.

Irudi graduatzailea SVG ereduekin

Saiatzen den esperimentu horietako beste bat eraman svg ereduak CSS graduazio baterako maskara irudi batzuk sortzeko. Oso lauso efektu deigarria egiten du akabera bikainarekin. Gure webguneko bisitariari sentimendu onak eragiteko graduatzaile horietako bat.

Geruza graduatzailea

Bat baino gehiagoko graduatzailea animazio nabarmena uhin efektu hori eskaintzen duena irudi berria irristatzeko ikonoan klik egiten dugun bakoitzean. HTML, CSS eta JavaScript-en egina beste irudi graduatzaile bat bihurtzen da.

CSS graduatzailea hutsa

CSS hutsa den beste graduatzaile errazena. Abantailetako bat behealdean ezkerreko puntu sorta animazio berezirik gabe gure aurretik igaroko diren irudi bakoitzera iristeko botoiak izango dira.

Cupcakes CSS graduatzailea soilik

El zerrendako graduatzaile gozoena eta CSS eta HTML bertsioetan bakarrik dagoela. Zerrenda osoko berezienetako bat da cupcakeen aldaera desberdinak eskuinean dituela. Egin klik batean eta cupcake bat errebote efektu bikainarekin amaitzen den animazio zoragarri batekin agertzen da. Zalantzarik gabe onenetarikoa.

Irristailu animazio efektua

Animazioko graduatzaile dotoreenetako bat eta zer lehenengo aldaketan txunditzea lortzen du. Animazioa sortzen den lehen unetik, bere HTML, CSS eta JavaScript kodea harrituta utzi gaitu. Ematen duen ukitu minimalistan hoberenetako beste bat.

Slider xerra

Un add class sinple bat erabiltzen duen trantsizio graduatzailea eta hori animazio oso leunak ditu ezaugarri zerrenda honetako gogokoenetako bat izateko. Webaren bertsio mugikorrean bere burua bereiztu nahi baduzu, ezinbesteko bat da. Ikusmen handia.

Slider Parallax New York

Honen abantaila handienetako bat parallax graduatzailea CSSn asko pertsonaliza daitekeela da. Horrek esan nahi du letra-tipoa, tamaina, kolorea eta animazioaren abiadura alda ditzakezula. JavaScript matrize kate berri bateko hiri bakoitzeko lehen letra diapositiba berri batean agertzen da. Mezu honen irristailu baliotsuetako bat.

Irristailu leihoa

Batekin estilo minimalista graduatzaile hau aurkezten da bertan irudiaren zati bakoitza diapositiba bakoitzarekin ateratzen da. Oso sortzailea eta graduatzaileen zerrendan ikusten denaren desberdina eta bere lekuan dagoena.

Ripple efektua duen graduatzailea

Un efektu handiko pantaila osoko graduatzailea kolore lauak dituen zuku guztia lortzeko. JavaScript, HTML eta CSS efektu deigarria duen beste graduatzaile baterako.

Irudiaren aurrebista duen graduatzailea

Slider GSAP hurrengo diapositiben aurrebista batekin hori erabiltzaileari aurkeztuko zaio. Ezin hobea moda edo diseinu webgune batean modelatzeko.

Irristailuen trantsizioak

Zerrenda batekin amaitzen dugu kalitate handiko graduatzailea efektu bombastikoa duena eta gure webgunean ukitu berezi hori lortzen duten animazio sorta. Paralax efektua aktiba daiteke.

Ez galdu hau beste CSS kode zerrenda bat botoientzat.