Folytatjuk a weboldalunkon implementálható CSS és HTML kód körét, hogy megkapjuk azt a különleges kapcsolatot, amellyel megkülönböztethetjük a többitől. A kontroll + c plusz a vezérlés + v jóvoltából a kezünkben van kód, amely készen áll az internetre napok vagy hetek tesztelés után töltve kell közzétenni.
Itt az ideje annak a 27 csúszkának a HTML és CSS használatával, amelyek lehetővé teszik számunkra, hogy előkészítsük azt a helyet, amelyben általában sok tartalmat integrálunk néhány pixel négyzetbe. Ezek a csúszkák a kártyán, összehasonlító, teljes képernyős, érzékeny és a legegyszerűbb, de ugyanakkor nagyon elegáns is. 27 csúszkával megyünk, amelyek senkit sem hagynak közömbösek, különösen az az ügyfél vagy felhasználó, aki a webhelyén keresztül olvas tartalmat, vásárol egy terméket, vagy egyszerűen összehasonlító csúszkával használja a kép előtti és utáni összehasonlítását.
Képernyők a kártyákon
Egy nagyon intuitív csúszka a HTML-ben és a CSS-ben, amely foglalkozik vigyen egy sor kártyát a webhelyére amelyeket nagyszerű animációval adnak át egymásnak. Pontosan az animáció és a háttérgradiens adja ezt a finom érintést ennek a HTML- és CSS-kódnak, amely szintén kitűnik egy kis JavaScript mellett. Elegáns a szó e minőségi csúszka ábrázolására.
Információs kártya csúszka
Ez az információs kártya csúszkája HTML, CSS és JavaScript kódokat is tartalmaz. Inkább kb egy sor kártyát ez nem vonz különösebb figyelmet az animációra, bár az egyszerűsége a legnagyobb érték. Egy másik csúszka, amelyet figyelembe kell venni ebből a listából.
Összehasonlító kép csúszka
Ez a csúszka az Nagyon hasznos és bizonyára sok olyan webhelyen látta, ahol a képek előtt és után egy vízszintesen csúszó függőleges sávot hasonlítanak össze. Nagy segítség az összehasonlításokhoz, ezért a csúszkák ezen listájának egyik legfontosabb elemévé tettük.
Összehasonlító csúszka JavaScript nélkül
A csúszka kiváló minősége az JavaScript nélkül érkezik, így csak a CSS-t és a HTML-kódot kell implementálnia a webhelyén, hogy újabb összehasonlítást kapjon. A kép összehasonlításának megtekintéséhez a kép alján található fekete mezőt kell használnia az egyik oldalról a másikra csúsztatáshoz. Nem olyan intuitív, mint az előző, de nagyon hasznos JavaScript nélkül.
Háromrétegű összehasonlító képcsúszka
A neve mindent elmond, egy képcsúszka lehetővé teszi, hogy egyszerre akár hármat is összehasonlítson. A bemutatott példa az egyik, amely a fej profilját látja, a másik az izmokat mutatja, a másik pedig a csúszka, amely a csontokat látja. Működéséhez HTML-t, CSS-t és JavaScript-et használ.
Vanilla JS Image Slider
Egy másik összehasonlító képcsúszka nagy gombbal amellyel a képet egyik oldalról a másikra csúsztathatja. Minimalista, kevés JavaScript-el és remek vizuális kivitelben. Az egyik legszembetűnőbb a képek összehasonlításához.
Átlósan osztott képernyő
ezt összehasonlító kép csúszka Envato Tuts készítette, és megkülönbözteti, hogy a csúszka átlósan helyezkedik el, hogy más típusú érzéseket okozzon két kép összehasonlításakor. Kiváló minőségű összehasonlító csúszkaként JavaScriptet, CSS-t és HTML-t használ.
Teljes képernyős csúszka
Eljutottunk a teljes képernyős csúszkák arra a részére, hogy találkozzunk Csúszka átmenet, amelyet átmenet jellemez nagy hatású animáció hajtotta végre. Ha azt tervezi, hogy a képeket teljes képernyőn jeleníti meg, és nagyon óvatosan megy át, kódoljon JavaScript-ben, CSS-ben és HTML-ben.
Vízszintes csúszka parallaxissal
mert a parallaxis rajongói hatással vannak erre a csúszkára Swiper.js, HTML és CSS használatával. Azon kívül, hogy a két oldalon elhelyezkedő két gombbal csúszhatunk, a jobb oldalon miniatűr formában láthatjuk a teljes körhinta összes képét. Egy másik és jó minőségű vizuális csúszka, amely nem hagy közömbös senkit, aki ellátogat a weboldalunkra.
Sima 3D perspektivikus csúszka
Ez egy érzékeny csúszka kövesse a mutató mozdulatait egér. Képes a perspektíva nagy hatását kiváltani, amely vegyes érzéseket idézhet elő a látogatóban. Ha tudja, hogyan kell helyesen használni, megadhatja ezt az eredeti és finom kapcsolatot webhelyünknek. Nincs hiányzó JavaScript, CSS és HTML kód.
Hős teljes képernyős csúszka
Teljes képernyős hős képcsúszka HTML, CSS és JavaScript formátumban. Van egy visszaverő hatás minden animációban ez megadja neki azt, és általában minőségi teljes képernyős csúszkával állunk szemben, mint a lista többi része.
VELO.JS csúszka szegéllyel
Az egyik csúcspont egy teljes képernyős csúszka, egyszerűen fantasztikus átmeneti animációval. Javasoljuk, hogy nézze meg működés közben, hogy elgondolkodjon azon, hogyan lehet az interneten megvalósítani. Használja a sebesség effektusokat A nyílgombokat használó animáció fejlesztéséhez kattintson egy kattintással a navigációban, és görgessen is, egyszerűen tökéletes.
Reagens CSS függőleges csúszka miniatűrökkel
Továbblépünk a csúszkákhoz Rugalmas CSS mobilhoz kiváló minőségű, mint ez. Jobb oldalon lesz egy kis indexkép, amelyet nyomva animáció indul függőleges esésben. Nagyszerű effektus, amely csak CSS-t használ egy csúszka elhagyásához a lista legjobbjai közül.
Kép csúszka flexbox
Más Reagens képcsúszka JavaScript-szel készült és hogy több mint egyszerű elég elegánsnak lenni. Rövid, egyszerű és minimalista, nem más, mint ez. Megvan a helye a Flexbox csúszkák ezen listájában.
Motion Blur SVG szűrőkkel
A kísérlet hatását szimuláló kísérlet mozgás elmosódik minden alkalommal, amikor a diát aktiválva van. SVG Gauss-féle elmosódás-szűrőt és néhány CSS-animációs kulcsot használ. A JavaScript-ben használt kód pusztán az adott példa és a csúszka funkcionalitása.
Animált csúszka
Animált csúszka reagál JavaScript, HTML és CSS segítségével. A jobb oldalon nyilak vannak, amelyek lehetővé teszik számunkra, hogy kecses és tömör animációval végigvigye a képeket. Nagyszerű hatás érhető el az egyes diákon, hogy feltűnjön. Nagyon aktuális az animációkban.
Kép csúszka SVG mintákkal
Egy másik ilyen kísérlet, amely megpróbálja svg mintákat hordoz néhány maszkkép létrehozásához egy CSS csúszkához. Nagyon frappáns elmosódást eredményez, nagyszerű felülettel. A csúszkák egyike azért, hogy jó érzéseket keltsen a weboldal látogatóiban.
Egyszerű réteg csúszka
Egy csúszka, eggyel több, mint jeles animáció amely ezt a hullámhatást kínálja minden alkalommal, amikor az ikonra kattintunk egy új kép csúsztatásához. Kész HTML-ben, CSS-ben és JavaScript-ben egy újabb képcsúszkává válik.
Tiszta CSS csúszka
A másik legegyszerűbb csúszka, és ez a tiszta CSS. Az egyik előnye a bal alul egy sor pötty amelyek gombokként szolgálnak minden olyan kép eléréséhez, amely minden különösebb animáció nélkül elhalad előttünk.
Csak a cupcakes CSS csúszka
El legédesebb csúszka a listán és hogy csak CSS-ben és HTML-ben van. A teljes lista egyik legkülönlegesebb, hogy a cupcakes jobb változatai vannak a jobb oldalon. Kattintson az egyikre, és egy cupcake jelenik meg egy csodálatos animációval, amely nagyszerű visszapattanó hatással végződik. Kétségtelenül az egyik legjobb.
Csúsztatható animációs hatás
Az animáció egyik legelegánsabb csúszkája és mi az első változáskor képes meghökkenteni minket. Az animáció első pillanattól kezdve HTML, CSS és JavaScript kódja meglepetést okoz számunkra. A minimalista érintés egyik legjobbja.
Csúsztatható szelet
Un átmenet csúszka, amely egy egyszerű add osztályt használ és ezt nagyon sima animációk jellemzik, hogy a lista egyik kedvencévé váljanak. Ha meg akarja különböztetni magát a web mobil változatában, ez az egyik alapvető dolog. Vizuálisan nagyon sok.
Csúszka Parallax New York
Ennek egyik legnagyobb előnye parallaxis csúszka a CSS-ben az, hogy sokat testreszabható. Ez azt jelenti, hogy megváltoztathatja a betűtípust, méretét, színét és az animáció sebességét. Minden város első betűje egy új JavaScript tömb karakterláncban egy új dián jelenik meg. A bejegyzés másik értékes csúszkája.
Csúsztatható felugró ablak
Egy minimalista stílusban ez a csúszka jelenik meg amelyben a kép egyes részei minden egyes diával előkerülnek. Nagyon kreatív és különbözik attól, ami a csúszkák listájában látható, és amely a saját helyén áll.
Csúszó effektus
Un nagy hatású teljes képernyős csúszka lapos színekkel, hogy minden levét megkapja. JavaScript, HTML és CSS egy másik csúszkához, figyelemfelkeltő hatással.
Csúszka képelőnézettel
Slider GSAP a következő diák előnézetével amelyet bemutatnak a felhasználónak. Tökéletes divat- vagy dizájn weboldal modellezéséhez.
Csúszkák átmenetek
A listát a-val fejezzük be kiváló minőségű csúszka bombázó hatással és egy sor animáció, amely ezt a különleges érzést kapja weboldalunkon. A parallaxishatás aktiválható.
Ne hagyja ki ezt egy másik CSS-kódlista gombokhoz.
Nagyon jó ez a bejegyzés, köszönöm a megosztásokat. Megállás nélkül közvetlenül a kedvencekhez megy.
Üdv haver.