5 Free Image Comparison Slider Scripts
Az átlapolt csúszkák lehetővé teszik, hogy összehasonlítsanak két képet, általában egy előtti fajtát, és a két kép egymásra helyezve. A manipulálható csúszkát a felhasználó húzhatja, hogy kevesebbet jelenítsen meg az előtte lévő képtől és az utólagos képtől, és fordítva.
Bizonyos forgatókönyvek tökéletes módja, mint például a Mars hangulatának súlyos hatásainak megnézése vagy a városi tájak fél évszázados változása..
A tervezők számára ez egy nagyszerű módja annak, hogy tükrözze a technika vagy a megközelítés változásának összegét az eredeti képre. Az összehasonlítás céljából különböző JS könyvtárak használhatók. Itt van 5 közülük.
Twentytwenty
Twentytwenty vizuális eszköz, amely megkönnyíti a két kép közötti különbségek felismerését. Ez az eszköz, amely a jQuery és a jquery.event.move munkát használja. Ez nagyon könnyen használható, csak két képet rakott egy tartályba, majd hívja twentytwenty (); a tartályhoz.
Azután:
$ ( "# Konténer"). Twentytwenty ();
A Twentytwenty minden eszközre reagál és működik, és ha az Alapítvány keretrendszerét használja, ez a dobozból nem működik.
Egymás mellé helyez
Egymás mellé helyez segít összehasonlítani két adathordozót (fényképek vagy GIF), és megkönnyíti, hogy kiemelje a képek közötti időbeli változást. Ez a bővítmény könnyen használható és minden eszközön működik. Csak két képet adjon meg, majd hívja a bővítményt a rendelkezésre álló opciókkal.
Az opcióknál beállíthatja a csúszka indítási pozícióját, beállíthatja függőleges vagy vízszintes, hozzáadhatja a címkét és a kreditet, az animációt és így tovább.
Próbálja ki az alábbi demót:
imgSlider
imgSlider egy egyszerű jQuery plugin a kép összehasonlító csúszka létrehozásához. A használat egyszerű és egyszerű: a JS és a CSS felvétele után a képeket ketté osztjuk a balra osztály a előtt kép, és jobb osztály a után kép, majd aktiválja a hívást .csúszka ();. A bővítmény beállításai közé tartozik a csúszka kezdeti pozíciójának beállítása és utasítások hozzáadása / megjelenítése a csúszkán.
Hívja a bővítményt:
$ ( 'Csúszkát'). Csúszkát ();
Cocoen
Cocoen lehetővé teszi a jQuery-Touch esemény használatának megérintését. Könnyen alkalmazható a HTML struktúrához hasonlóan Twentytwenty csatlakoztat. A parancsfájl-veremen kívül a jQuery mellett meg kell adnia a jQuery Touch eseménykönyvtárat is a plugin mellett.
$ (dokumentum). már (függvény () $ ('. cocoen'). cocoen (););
Próbálja ki az alábbi demót:
Kép összehasonlítás csúszka
A CodyHouse bemutatta a CSS3, a jQuery és néhány szkriptet tartalmazó kép-összehasonlító csúszkát, hogy kezelje a húzó eseményt és hozzáadjon mobil támogatást. Kövesse a teljes magyarázatot és utasításokat a bővítmény használatához itt, és itt tekintheti meg a bemutatót.
Próbálja ki az alábbi demót:
Íme még 3:
Cato - Más bővítményeknek függőségnek kell lennie a jQuery-nek, de Cato nem igényel függőséget a munkától, így könnyebb könyvtár lesz a kép összehasonlító csúszkák számára. A használat egyszerű, csak a Cato CSS és JS könyvtárát, és kövesse a HTML struktúráját.
Vannak opciók, amelyek alkalmazhatók a csúszkán, beleértve az eszköztippek hozzáadását, a csúszka irányának megváltoztatását, még a szűrőhatás hozzáadása, például a szépia és a szürkeárnyalat. Meg kell azonban jegyeznünk, hogy a Cato jelenleg csak a WebKit támogatását támogatja.
Előtte utána - Ez könnyű, teljesen érzékeny, és bármilyen elrendezésre és méretre működik. Láthatjuk az élő demókat a Codepen-en.
HTML5 videó összehasonlító csúszka - Amikor egy másik fejlesztő próbál összehasonlító csúszkát készíteni a képekhez, akkor a Dudley Storey alkalmazza a csúszkát a videóra. A munka érdekében a jQuery-t és a kód néhány sorát használja. Lásd a Codepen bemutatóját a fellépés megtekintéséhez.
