27 HTML- ja CSS-liugurit, et anda teie veebisaidile eriline puudutus

Cupcake liugur

Jätkame CSS-i ja HTML-koodi vooru, mida saab meie veebisaidil rakendada, et anda sellele eriline puudutus, millega seda teistest eristada. Tänu + c juhtimisele pluss + v juhtimisele, mida saame on meie käsikood, mis muudab veebi valmis avaldatakse arendusjärgselt pärast testide veetmist mitu päeva või nädalat.

Nüüd on aeg HTML-i ja CSS-i 27 liuguri jaoks, mis võimaldavad meil ette valmistada ruumi, kuhu me tavaliselt integreerime palju sisu mõne piksli ruudus. Need liugurid ulatuvad kaardilt, võrdlev, täisekraan, reageeriv ja kõige lihtsam, kuid samas ka väga elegantne. Me liigume 27 liuguriga, mis ei jäta kedagi ükskõikseks, eriti klienti või kasutajat, kes läbib teie veebisaiti sisu lugemiseks, toote ostmiseks või lihtsalt pildi võrdlemiseks enne ja pärast võrdleva liuguriga.

Ekraanid kaartidel

onboarding

Väga intuitiivne liugur HTML-is ja CSS-is, mis tegeleb viige oma kaardile rea kaarte mida edastatakse ühelt teisele suurepärase stiiliga animatsiooniga. Just animatsioon ja taustgradient annavad sellele HTML- ja CSS-koodile selle peene puudutuse, mis paistab silma ka natuke JavaScripti poolest. Elegantne on sõna selle kvaliteedi liuguri kujutamiseks.

Infokaardi liugur

Informatsiooniline liugur

See infokaardi liugur on kood ka HTML-is, CSS-is ja JavaScriptis. See on pigem umbes kaartide seeria see ei pälvi animatsiooni jaoks palju tähelepanu, kuigi selle suurim väärtus on selle lihtsus. Veel üks liugur, mida sellest loendist kaaluda.

Võrdlev pildi liugur

Võrdlev liugur

See liugur on Väga kasulik Ja kindlasti olete seda näinud paljudel veebisaitidel, kus enne ja pärast fotosid võrreldakse horisontaalselt libiseva vertikaalse ribaga. See on suureks võrdluseks abiks, nii et tegime selle üheks liugurite loendi oluliseks osaks.

Võrdlev liugur ilma JavaScripti

Võrdlev liugur ilma JS-ta

Selle liuguri suurepärane kvaliteet on see tuleb ilma JavaScripti, nii et peate teise võrdluse saamiseks oma veebisaidil juurutama ainult CSS-i ja HTML-koodi. Piltide võrdluse nägemiseks peate pildi allosas olevat musta kasti libistama selle ühelt küljelt teisele. Mitte nii intuitiivne kui eelmine, kuid ilma JavaScripti kasutamata väga kasulik.

Kolmekihiline võrdleva pildi liugur

Kolmekihiline liugur

Selle nimi ütleb kõik, pildi liugur, mis võimaldab võrrelda kuni kolme korraga. Toodud näide on üks pea profiilis nägemiseks, teine ​​lihaste näitamiseks ja teine ​​liugur luude nägemiseks. Ta kasutab oma toimimiseks HTML-i, CSS-i ja JavaScripti.

Vanilla JS pildiliugur

Võrdlev liugur

Veel üks võrdlev pildi liugur suure nupuga millega pilti ühelt küljelt teisele libistada. Minimalistlik, vähese JavaScripti ja suurepärase visuaalse viimistlusega. Üks silmatorkavamaid pilte võrrelda.

Jagatud ekraan diagonaalselt

Diagonaalne võrdlev liugur

see võrdluspildi liugur Selle on loonud Envato Tuts ja see eristab seda, et kahe pildi võrdlemisel on liugur paigutatud diagonaalselt, põhjustades teist tüüpi aistinguid. See kasutab JavaScripti, CSS-i ja HTML-i, et olla kvaliteetne võrdlusliugur.

Täisekraani liugur

Üleminekuliugur

Jõudsime täisekraaniga liugurite juurde, et kohtuda Liuguri üleminek, mida iseloomustab üleminek läbi suure efektiga animatsioon. Kui plaanite pilte näidata täisekraanil ja läbite need väga hoolikalt, koodige JavaScript, CSS ja HTML.

Parallaksiga horisontaalne liugur

Parallaksi liugur

Jaoks parallaksi fännid mõjutavad seda liugurit koos Swiper.js, HTML ja CSS-iga. Peale selle, et saame libiseda mõlemal küljel asuva kahe nupuga, on paremal küljel miniatuurselt kõik kogu karusselli kujutised. Erinev ja kvaliteetne visuaalne liugur, mis ei jäta ükskõikseks kedagi, kes külastab meie veebisaiti.

Sujuv 3D-perspektiivi liugur

3D-perspektiivi sile liugur

Reageeriv liugur, mis järgige kursori liikumisi hiir. See on võimeline tekitama suurt perspektiivi efekti, mis võib tekitada külastajana segaseid tundeid. Kui teate, kuidas seda õigesti kasutada, saate meie veebisaidile anda selle originaalse ja peene puudutuse. JavaScript, CSS ja HTML-kood pole puudu.

Hero täisekraani liugur

Kangelase pildi liugur

HTML-i, CSS-i ja JavaScripti täisekraanil kuvatava kangelase kujutise liugur. Kas teil on põrkefekt igas animatsioonis see annab selle ja üldiselt seisame silmitsi kvaliteetse täisekraani liuguriga nagu kogu ülejäänud loend.

VELO.JS liugur piiridega

Liuguri loori servad

Üks silmapaistvaid funktsioone täisekraani liugurina, millel on lihtsalt fantastiline üleminekuanimatsioon. Soovitame teil selle toimimist vaadata, et hakata mõtlema, kuidas seda veebis rakendada. Kasutage kiirusefekte Noolenuppe kasutava animatsiooni täiustamiseks klõpsake lihtsalt navigeerimisel ja kerige lihtsalt täiuslik.

Reageeriv CSS vertikaalne liugur pisipiltidega

Reageeriv CSS-liugur

Liigume liugurite juurde Tundlik CSS mobiilseadmetele suurepärane kvaliteet nagu see. Paremal on rida pisipilte, mida vajutades käivitatakse animatsioon vertikaalsuunas. Suurepärane efekt, mis kasutab ainult CSS-i, et jätta selle loendi parimatest liugur.

Pildi liuguri paindekast

Pildi liuguri paindekast

Muu JavaScripti abil loodud tundlik pildi liugur ja et üsna elegantne on enam kui lihtne. Lühike, lihtne ja minimalistlik, millel pole midagi muud. Sellel on oma koht Flexboxi liugurite loendis.

Motion Blur SVG filtritega

Liuguri liikumine hägustub

Katse, mis simuleerib liikumine häguneb iga slaidi korral on aktiveeritud. See kasutab SVG Gaussi hägususfiltrit ja mõnda CSS-i animatsiooniklahvi. JavaScriptis kasutatav kood on puhtalt antud näite ja liuguri funktsionaalsuse jaoks.

Animeeritud liugur

Animeeritud liugur

Animeeritud liugur reageerib JavaScripti, HTML-i ja CSS-iga. Paremal küljel on nooled, mis võimaldavad meil graatsilise ja sisutiheda animatsiooniga läbi vaadata pilte, mis pärinevad. Igal slaidil saavutatakse suurepärane efekt, et ennast esile tõsta. Animatsioonides väga aktuaalne.

SVG mustritega pildiliugur

Ainult liugur CSS SVG

Teine neist katsetest, mis proovib kanda svg-mustreid CSS-liuguri jaoks mõne maskipildi loomiseks. See muudab suurepärase viimistlusega väga silmatorkava hägususe. Veel üks neist liuguritest, et tekitada meie veebisaidi külastajana häid tundeid.

Lihtne kihtliugur

Kihiline liugur

Liugur, millel on üks rohkem kui eristatav animatsioon mis pakub seda laineefekti iga kord, kui klõpsame uue pildi libistamiseks ikoonil. Koostatud HTML-is, CSS-is ja JavaScripti abil saab sellest veel üks pildi liugur.

Puhas CSS-liugur

Puhas CSS-liugur

Veel üks lihtsamaid liugureid, mis on puhas CSS. Üks selle eelisest, mida panna all vasakul rida täppe mis toimib nuppudena, et jõuda kõigi piltideni, mis mööduvad enne meid ilma erilise animatsioonita.

Ainult Cupcake'i liugur CSS

Liugurikook

El kõige armsam liugur nimekirjas ja et see on ainult CSS-is ja HTML-is. See on üks erilisemaid kogu nimekirjast, mille paremal küljel on erinevad koogikeste variatsioonid. Klõpsake ühel ja kuvatakse tassikook koos suurepärase animatsiooniga, mis lõpeb suurepärase põrgatusefektiga. Üks parimatest kahtlemata.

Liugli animatsiooni efekt

Animatsiooni liugur

Üks elegantsemaid liugureid animatsioonis ja mis suudab meid esimese muutuse korral hämmastada. Juba esimesest hetkest, kui animatsioon tekib, tekitab selle HTML-, CSS- ja JavaScripti kood üllatuse. Veel üks parimatest minimalistlikus puudutuses, mida see annab.

Liugklapp

Liuglihvija

Un üleminekuliugur, mis kasutab lihtsat lisaklassi ja seda iseloomustavad väga sujuvad animatsioonid, et saada selles loendis üheks lemmikuks. Kui soovite ennast mobiilses veebiversioonis eristada, on see üks hädavajalik. Visuaalselt väga palju.

Liugur Parallax New York

Liugur New York

Selle üks suurimaid eeliseid parallaksi liugur CSS-is on see, et seda saab palju kohandada. See tähendab, et saate muuta fonti, selle suurust, värvi ja animatsiooni kiirust. Iga linna esimene täht uues JavaScripti massiivi stringis kuvatakse uuel slaidil. Veel üks selle postituse väärtuslikest liuguritest.

Liugur hüpikaken

Liugur hüpikaken

Mis minimalistlik stiil see liugur on esitatud milles iga pildi osa tuleb välja iga slaidiga. Väga loominguline ja erinev sellest, mis on näha liugurite loendis ja mis seisab omal kohal.

Ripple efektiga liugur

Liuguri pulsatsioon

Un suurepärase efektiga täisekraani liugur lamedate värvidega, et kogu mahl kätte saada. JavaScripti, HTML-i ja CSS-i jaoks veel üks pilkupüüdva efektiga liugur.

Liugur pildi eelvaatega

Eelmine liugur

Slider GSAP eelseisvate slaidide eelvaatega mis esitatakse kasutajale. Ideaalne moe- või disainiveebis modelleerimiseks.

Liugurite üleminekud

Liugurite üleminekud

Loendi lõpetame a-ga kvaliteetne pommitatava efektiga liugur ja rida animatsioone, mis saavad meie veebisaidil selle erilise puudutuse. Parallaksi efekti saab aktiveerida.

Ära jäta seda ilma teine ​​CSS-koodide loend nuppude jaoks.


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Ole esimene kommentaar

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.