27 HTML- és CSS-csúszka, amelyek a weboldaladnak olyan különleges érzetet adnak

Cupcake csúszka

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

üdvözlő

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

Információs 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

Összehasonlító 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

Összehasonlító csúszka JS 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

Három rétegű csú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

Összehasonlító csúszka

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ő

Átlós összehasonlító csúszka

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

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

Parallaxis csúszka

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

3D perspektíva sima 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

Hős kép 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

Csúsztatható fátyolszélek

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

Érzékeny CSS csúszka

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

Flexbox kép csúszka

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 csúszka mozgása elmosódik

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

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

Csak csúszka CSS SVG

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

Réteges 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

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

Csúsztatható cupcake

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

Animáció csúszka

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

Csúszó szeletelő

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

Csúszka 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

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

Csúszó hullámzás

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

Előző csúszka

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

Csúszó átmenet

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.


A cikk tartalma betartja a szerkesztői etika. A hiba bejelentéséhez kattintson a gombra itt.

Hozzászólás, hagyd a tiedet

Hagyja megjegyzését

E-mail címed nem kerül nyilvánosságra.

*

*

  1. Az adatokért felelős: Miguel Ángel Gatón
  2. Az adatok célja: A SPAM ellenőrzése, a megjegyzések kezelése.
  3. Legitimáció: Az Ön beleegyezése
  4. Az adatok közlése: Az adatokat csak jogi kötelezettség alapján továbbítjuk harmadik felekkel.
  5. Adattárolás: Az Occentus Networks (EU) által üzemeltetett adatbázis
  6. Jogok: Bármikor korlátozhatja, helyreállíthatja és törölheti adatait.

  1.   Santiago dijo

    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.