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

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

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

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

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

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

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

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

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

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

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

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

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

Ü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

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

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

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 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

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

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

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

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

Ü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

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

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.

CreativosOnline