5 Free Image Comparison Slider Scripts
Overlaid skyveknapper gir deg mulighet til å sammenligne mellom to bilder, vanligvis en tidligere type, med de to bildene overlappet på hverandre. En skyveknapp som kan manipuleres, kan dras av brukeren for å vise mindre av førbilde og mer av etterbildet, og omvendt.
Det er den perfekte måten for visse scenarier, for eksempel å se de harde effektene av Mars 'atmosfære eller hvordan bylandskap endres over et halvt århundre.
For designere er det også en fin måte å reflektere over hvor mye endring en teknikk eller tilnærming har på et originalt bilde. Det finnes ulike JS-biblioteker du kan bruke til sammenligningsformål. Her er 5 av dem.
Twentytwenty
Twentytwenty er visuelt verktøy for å gjøre det enkelt å merke forskjellene mellom to bilder. Dette verktøyet bruker jQuery og jquery.event.move å jobbe. Det er veldig enkelt å bruke, bare stable to bilder i en beholder, og ring deretter twentytwenty (); for beholderen.
Deretter:
$ ( "# Container") twentytwenty (.);
Twentytwenty er lydhør og fungerer for alle enheter, og hvis du bruker Foundation Framework, vil dette fungere ut av boksen.
sidestille
sidestille hjelper deg å sammenligne to stykker medie (bilder eller GIF) og gjøre det enkelt for deg å markere endringen mellom bildene over tid. Dette pluginet er enkelt å bruke og fungerer på alle enheter. Bare gi to bilder og ring deretter pluginet med de tilgjengelige alternativene.
På alternativene kan du sette glidebryterens startposisjon, sette den vertikalt eller horisontalt, legg til etikett og kreditt, animasjon og mer.
Prøv en demo nedenfor:
imgSlider
imgSlider er et enkelt jQuery-programtillegg for å lage bilde sammenligning skyveknappen. Bruken er enkel og enkel: etter at du har tatt med JS og CSS, pakk bildene i div med venstre klasse for før bilde og Ikke sant klasse for etter bilde, og aktiver det ved å ringe .skyveren ();. Alternativene for plugin inkluderer innstilling av startposisjonen til skyvekontrollen, og legge til / vise instruksjoner på skyvekontrollen.
Ring til plugin:
$ ( 'Skyve') glideren (.);
Cocoen
Cocoen gjør det mulig å berøre bruken av jQuery-Touch-hendelsen. Det er enkelt å søke på grunn av en HTML-struktur som ligner på Twentytwenty plugg inn. På skriptstakken, foruten jQuery, må du inkludere jQuery Touch Event-biblioteket, sammen med dette pluginet.
$ (dokument) .ready (funksjon () $ ('.cocoen'). cocoen (););
Prøv en demo nedenfor:
Skjermbildet Bildejämförelse
CodyHouse lagde en demonstrasjon av en bilde sammenligningsregulator med CSS3, jQuery og noen skript for å håndtere dra hendelsen og legge til mobil støtte. Du kan følge den fulle forklaringen og instruksjonene for å bruke dette pluginet her og se demoen her.
Prøv en demo nedenfor:
Her er 3 flere:
cato - Andre plugins trenger jQuery som avhengighet, men cato krever ingen avhengighet i arbeid, noe som gjør det til et mer lettvektsbibliotek for glidebrytere for bilde sammenligning. Bruken er enkel, bare ta med Cato's CSS og JS bibliotek og følg HTML-strukturen.
Det er muligheter til å søke på glidebryteren din, inkludert å legge til verktøytips, endre skyveretning, til og med legge til filtereffekt som sepia og gråtoner. Men du bør merke at Cato for øyeblikket bare har støtte for WebKit.
Før etter - Dette er lett, fullstendig lydhør, og fungerer på en hvilken som helst layout og størrelse. Du kan se live demoer på Codepen.
HTML5 Video Sammenligning Slider - Når en annen utvikler prøver å lage sammenligningsregulator for bilder, bruker Dudley Storey skyvekontrollen til video. For å gjøre arbeid, bruker han jQuery og bare noen få linjer med kode. Se demonstrasjonen på Codepen for å se handlingen.
