27 HTML- en CSS-skuifblaaie om u webwerf daardie spesiale aanraking te gee

Skyfie vir kolwyntjies

Ons gaan voort met 'n ronde CSS- en HTML-kode wat op ons webwerf geïmplementeer kan word om die spesiale aanraking te gee waarmee dit van die res onderskei kan word. Danksy die + c-beheer plus die + v-beheer wat ons kan het in ons hand kode wat die web gereed sal maak om in ontwikkeling gepubliseer te word nadat u dae of weke daaraan bestee het om te toets.

Dit is die tyd vir 27 skuifblaaie in HTML en CSS waarmee ons die ruimte kan voorberei waarin ons gewoonlik baie inhoud in enkele pixels in die vierkant integreer. Hierdie glyers wissel van op kaart, vergelykend, volskerm, reageerbaar en die eenvoudigste, maar terselfdertyd ook baie elegant. Ons gaan met 27 skuifblaaie wat niemand onverskillig sal laat nie, veral die kliënt of gebruiker wat deur u webwerf gaan om inhoud te lees, 'n produk te koop of bloot 'n vergelykende skuifbalk te gebruik om 'n beeld voor en daarna te vergelyk.

Skerms op kaarte

op instap

'N Baie intuïtiewe skuifbalk in HTML en CSS wat handel oor neem 'n reeks kaarte na u webwerf wat van die een na die ander oorgedra word met 'n animasie met 'n wonderlike styl. Dit is juis die animasie en die agtergrondgradiënt wat hierdie HTML- en CSS-kode hierdie subtiele aanraking gee, wat ook uitstaan ​​vir 'n bietjie JavaScript. Elegant is die woord om hierdie kwaliteit glyer uit te beeld.

Inligtingskaart skuifbalk

Inligtingskuif

Hierdie infokaart-skuifbalk is ook kodeer in HTML, CSS en JavaScript. Dit gaan eerder oor 'n reeks kaarte dit trek nie veel aandag vir die animasie nie, hoewel die eenvoud daarvan die grootste waarde is. Nog 'n skuifbalk om in hierdie lys te oorweeg.

Vergelykende beeldskuif

Vergelykende skuifbalk

Hierdie skuif is Van groot nut En dit het u beslis gesien op 'n menigte webwerwe waar voor- en na-foto's vergelyk word met 'n vertikale balk wat horisontaal gly. Dit is 'n goeie hulpmiddel vir vergelykings, en daarom het ons dit een van die belangrikste op hierdie lys van skuifblaaie gemaak.

Vergelykende skuifbalk sonder JavaScript

Vergelykende skuifbalk sonder JS

Die uitstekende gehalte van hierdie skuifbalk is dat kom sonder JavaScript, dus hoef u slegs die CSS- en HTML-kode op u webwerf te implementeer om weer 'n vergelyking te tref. U moet die swart blokkie onderaan die prent gebruik om dit van die een kant na die ander te skuif om die beeldvergelyking te sien. Nie so intuïtief soos die vorige nie, maar baie nuttig sonder JavaScript.

Drie-laag vergelykende beeldskuif

Drie laag skuifbalk

Die naam sê alles, 'n beeldskuif kan u tot drie op 'n slag vergelyk. Die voorbeeld is een om die kop in profiel te sien, 'n ander om die spiere te wys en 'n ander skuif om die bene te sien. Dit gebruik HTML, CSS en JavaScript vir die werking daarvan.

Vanilla JS Image Slider

Vergelykende skuifbalk

Nog 'n vergelykende beeldskuifbalk met 'n groot knoppie waarmee u die beeld van die een kant na die ander kan skuif. Minimalisties, met min JavaScript en 'n uitstekende visuele afwerking. Een van die opvallendste om foto's te vergelyk.

Verdeel skerm skuins

Diagonale vergelykende skuifbalk

hierdie vergelykende beeldskuif Dit is geskep deur Envato Tuts en het die onderskeid dat die skuif skuins geplaas word om ander soorte sensasies te veroorsaak wanneer twee beelde vergelyk word. Dit gebruik JavaScript, CSS en HTML om 'n vergelykende skuif van hoë gehalte te wees.

Skuif vir die volle skerm

Oorgangskuif

Ons het by die gedeelte van die skerms vir die volle skerm gekom om mee te ontmoet Slider Transition wat gekenmerk word deur 'n oorgang uitgevoer deur 'n animasie van groot effek. Voer JavaScript, CSS en HTML in as u van plan is om beelde op die volle skerm te wys en u baie noukeurig deurgee.

Horisontale skuifbalk met parallaks

Parallaks skuifbalk

Vir aanhangers van die parallaks beïnvloed hierdie skuifbalk met Swiper.js, HTML en CSS. Behalwe dat ons met die twee knoppies aan weerskante kan gly, het ons aan die regterkant al die foto's van die volledige karrousel in miniatuur. 'N Visuele skuifbalk van 'n ander en hoë gehalte wat niemand wat ons webwerf besoek, onverskillig sal laat nie.

Gladde 3D-perspektiefskuif

3D perspektief gladde glyer

'N Responsiewe skuifbalk wat volg die wyserbewegings muis. Dit kan 'n groot perspektief beïnvloed wat tot gemengde gevoelens by die besoeker kan lei. As u weet hoe om dit behoorlik te gebruik, kan u die oorspronklike en subtiele aanraking op ons webwerf gee. JavaScript, CSS en HTML-kode ontbreek nie.

Held volskermskuif

Skyfie vir helde

'N Helde-beeldskyfskerm in HTML, CSS en JavaScript. Het 'n weiering effek in elke animasie Dit gee dit sy sin en in die algemeen staan ​​ons voor 'n kwaliteit volskermskuif soos die res van die lys.

VELO.JS-skuifbalk met rande

Skuifrande van die sluier

Een van die hoogtepunte as 'n volskermskuif met 'n eenvoudig fantastiese oorgangsanimasie. Ons beveel aan dat u dit gaan gebruik om te begin nadink oor hoe u dit op die internet kan implementeer. Gebruik Velocity-effekte Om die animasie met behulp van die pijlknoppies te verbeter, is 'n klik in die navigasie en selfs blaai, eenvoudig perfek.

Responsiewe CSS vertikale skuifbalk met kleinkiekies

Responsiewe CSS-skuifbalk

Ons beweeg na die skuifbalkies Responsiewe CSS vir selfone goeie gehalte soos hierdie. U sal 'n reeks kleinkiekies aan die regterkant hê wat 'n animasie in vertikale herfs sal begin as u dit indruk. Uitstekende effek wat slegs CSS gebruik om 'n skuifbalk van die beste in hierdie lys agter te laat.

Flexbox vir beeldskuif

Flexbox-beeldskuif

Ander Responsiewe beeldskuif gemaak met JavaScript en dat dit meer as eenvoudig is om redelik elegant te wees. Kort, eenvoudig en minimalisties met niks meer as dit nie. Dit het sy plek in hierdie lys van Flexbox-skuifblaaie.

Bewegingsonscherpte met SVG-filters

Skyfie-bewegingsonscherpte

'N Eksperiment wat die effek van simuleer beweging vervaag elke keer as 'n skyfie beweeg geaktiveer is. Dit gebruik 'n SVG Gaussiese vervaging filter en 'n paar CSS animasiesleutels. Die kode wat in JavaScript gebruik word, is slegs vir die gegewe voorbeeld en die funksionaliteit van die skuifbalk.

Geanimeerde skuifbalk

Geanimeerde skuifbalk

'N Geanimeerde skuifbalk reageer op JavaScript, HTML en CSS. Ons het pyle aan die regterkant wat ons toelaat om deur die beelde te gaan wat met 'n sierlike en bondige animasie ontstaan. 'N Groot effek word in elk van die skyfies behaal om homself te laat uitstaan. Baie aktueel in animasies.

Beeldskuif met SVG-patrone

Slegs skuifbalk CSS SVG

Nog een van die eksperimente wat probeer dra svg patrone om 'n paar maskerbeelde vir 'n CSS-skuifbalk te skep. Dit lewer 'n baie opvallende vervaag-effek met 'n wonderlike afwerking. Nog een van die skuifblaaie om goeie gevoelens by die besoeker van ons webwerf uit te lok.

Eenvoudige laagskuif

Gelaagde glyer

'N Skuifbalk met een meer as vooraanstaande animasie wat die golfeffek bied elke keer as ons op die ikoon klik om 'n nuwe beeld te skuif. Klaar in HTML, CSS en JavaScript word dit 'n ander beeldskuifbalk.

Suiwer CSS-skuifbalk

Suiwer CSS-skuifbalk

Nog een van die eenvoudigste skuifblaaie wat pure CSS is. Een van die voordele wat dit in die links onder 'n reeks kolletjies dit sal dien as die knoppies om elk van die beelde te bereik wat sonder enige spesiale animasie voor ons sal uitkom.

Slegs kolwyntjies CSS

Skuif kolwyntjie

El soetste skuifbalk op die lys en dat dit slegs in CSS en HTML is. Dit is een van die spesiaalste van die hele lys om die verskillende variasies van kolwyntjies aan die regterkant te hê. Klik op een en 'n kolwyntjie verskyn met 'n wonderlike animasie wat eindig met 'n groot weiering. Een van die beste sonder twyfel.

Skuif animasie-effek

Skuif vir animasie

Een van die elegantste skuifblaaie in animasie en wat slaag daarin om ons te verbaas met die eerste verandering. Vanaf die eerste oomblik wat die animasie ontstaan, laat die HTML-, CSS- en JavaScript-kode ons verbaas. Nog een van die beste in die minimalistiese aanraking wat dit gee.

Skyfie sny

Skuif snyer

Un oorgangskuifbalk wat 'n eenvoudige add-klas gebruik en dit word gekenmerk deur baie gladde animasies om een ​​van die gunstelinge op hierdie lys te word. As u uself wil onderskei in die mobiele weergawe van die web, is dit een van die belangrikste dinge. Baie visueel.

Slider Parallax New York

Slider New York

Een van die grootste voordele hiervan parallaks-skuifbalk in CSS is dat dit baie aangepas kan word. Dit beteken dat u die lettertipe, die grootte, die kleur en die snelheid van die animasie kan verander. Die eerste letter van elke stad in 'n nuwe JavaScript-skikkingstring verskyn op 'n nuwe skyfie. Nog een van die waardevolle skuifblaaie van hierdie berig.

Skuif pop-up

Skuif pop-up

Met 'n minimalistiese styl word hierdie skuif aangebied waarin elke deel van die prent met elke skyfie uitkom. Baie kreatief en anders as wat in die lys skuifblaaie gesien word en wat op sy eie plek staan.

Skuif met rimpeleffek

Skuif rimpel

Un hoë-effek-skerm vir die volle skerm met plat kleure om al sy sap te kry. JavaScript, HTML en CSS vir 'n ander skuifbalk met 'n opvallende effek.

Skuif met voorskou van die prent

Vorige skuifbalk

Slider GSAP met 'n voorskou van komende skyfies wat aan die gebruiker aangebied word. Ideaal vir modellering op 'n mode- of ontwerpwebwerf.

Skuif oorgange

Skuif oorgange

Ons sluit die lys af met 'n hoë kwaliteit skuifbalk met bombastiese effek en 'n reeks animasies wat die spesiale aanraking op ons webwerf kry. Die parallaks-effek kan geaktiveer word.

Moet dit nie misloop nie 'n ander CSS-kodelys vir knoppies.


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

Wees die eerste om te kommentaar lewer

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.