5 Free Image Comparison Slider Scripts
Uždengtos slankmačiai leidžia jums palyginti du vaizdus, dažniausiai prieš tai buvusius, su dviem vaizdais vienas ant kito. Slankiklį, kurį galima manipuliuoti, vartotojas gali vilkti, kad būtų rodomas mažiau prieš tai buvusio vaizdo ir daugiau po paveikslėlio, ir atvirkščiai.
Tai puikus būdas tam tikriems scenarijams, pvz., Atšiaurių Marso atmosferos poveikių žiūrėjimui ar miesto kraštovaizdžio pasikeitimui per pusę amžiaus.
Dizaineriams tai taip pat yra puikus būdas apsvarstyti technikos ar požiūrio pakeitimo dydį originaliame vaizde. Palyginimui galima naudoti įvairias JS bibliotekas. Čia yra 5 iš jų.
Twentytwenty
Twentytwenty yra vaizdinis įrankis, leidžiantis lengvai pastebėti skirtumus tarp dviejų vaizdų. Šis įrankis, kuriame naudojamas jQuery ir jquery.event.move dirbti. Tai labai paprasta naudoti, tiesiog sukrauti du vaizdus į konteinerį, paskambinkite twentytwenty (); už konteinerį.
Tada:
$ („# konteineris“). twentytwenty ();
„Twentytwenty“ reaguoja ir veikia visuose įrenginiuose, o jei naudojate fondo sistemą, tai neveiks.
Sulyginti
Sulyginti padeda jums palyginti dvi medijos dalis (nuotraukas ar GIF) ir leisti jums lengvai paryškinti pokyčius tarp vaizdų per tam tikrą laiką. Šis įskiepis yra paprastas naudoti ir veikia visuose įrenginiuose. Tiesiog pateikite du vaizdus, paskambinkite įskiepiu su turimomis parinktimis.
Funkcijose galite nustatyti slankiklio pradinę padėtį, nustatyti ją vertikaliai arba horizontaliai, pridėti etiketę ir kreditą, animaciją ir dar daugiau.
Išbandykite žemiau pateiktą demonstraciją:
imgSlider
imgSlider yra paprastas jQuery įskiepis, leidžiantis vaizdo palyginimo slankiklį. Naudojimas yra paprastas ir paprastas: įtraukę JS ir CSS, apvyniokite vaizdus į div kairėje klasė anksčiau vaizdas, ir teisė klasė po to tada įjunkite jį skambindami .slankiklį ();. Įskiepio parinktys apima pradinės slankiklio padėties nustatymą ir nurodymų įtraukimą į slankiklį.
Skambinkite įskiepiai:
$ („. slider“). slankiklį ();
Cocoen
Cocoen leidžia prisiliesti prie „jQuery-Touch“ renginio naudojimo. Tai lengva taikyti dėl HTML struktūros, panašios į Twentytwenty prijungti. Be scenarijaus steko, be „jQuery“ turite pridėti „jQuery Touch“ įvykių biblioteką, šalia šio papildinio.
$ (dokumentas). jau (funkcija () $ ('. cocoen'). cocoen (););
Išbandykite žemiau pateiktą demonstraciją:
Vaizdų palyginimo slankiklis
„CodyHouse“ demonstravo vaizdo palyginimo slankiklį su „CSS3“, „jQuery“ ir kai kuriais scenarijais, kad tvarkytų „drag event“ ir pridėtų mobilųjį palaikymą. Čia galite sekti visą paaiškinimą ir nurodymus, kaip naudoti šį papildinį, ir pamatyti demo čia.
Išbandykite žemiau pateiktą demonstraciją:
Čia yra dar 3:
Cato - Kiti papildiniai turi priklausomybę nuo jQuery, bet Cato nereikalauja jokios priklausomybės nuo darbo, todėl ji yra lengvesnė vaizdų palyginimo slankiklių biblioteka. Naudojimas yra paprastas, tiesiog įtraukite Cato CSS ir JS biblioteką ir sekite jos HTML struktūrą.
Yra parinkčių, kurios gali būti pritaikytos jūsų slankikliui, įskaitant įrankių šrifto pridėjimą, slankiklio krypties keitimą, net ir filtro efekto, pvz., Sepijos ir pilkos spalvos, pridėjimą. Tačiau turėtumėte atkreipti dėmesį, kad Cato šiuo metu palaiko tik „WebKit“.
Prieš po - Tai lengvas, visiškai reaguojantis ir veikia bet kokiu išdėstymu ir dydžiu. Jūs galite pamatyti gyvus demonstracijas „Codepen“.
HTML5 vaizdo palyginimo slankiklis - Kai kiti kūrėjai bando padaryti vaizdų palyginimo slankiklį, tuomet „Dudley Storey“ pritaikys slankiklį vaizdo įrašui. Norint dirbti, jis naudojasi jQuery ir tik keliomis eilutėmis kodo. Žr. „Codepen“ demonstraciją, kad pamatytumėte veiksmą.
