5 Free Image Comparison Slider Scripts

Overlaid skyveknapper gir deg mulighet til å sammenligne mellom to bilder, vanligvis en tidligere type, med de to bildene overlappende 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 på de barske 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 responsiv og fungerer for alle enheter, og hvis du bruker Foundation Framework, vil dette fungere ut av boksen.

sidestille

Juxtapose 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, angi vertikal eller horisontal, legge til etikett og kreditt, animasjon og mer.

Prøv en demonstrasjon nedenfor:

imgSlider

imgSlider er et enkelt jQuery-plugin for å lage bilde sammenligningsregulator. Bruken er enkel og enkel: Etter å ha tatt med JS og CSS, pakk bildene i div med den left klassen for før bildet, og right klasse for etterbildet, og aktiver det ved å ringe .slider(); . 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 å ta kontakt med bruken av jQuery-Touch-hendelsen. Det er enkelt å søke på grunn av en HTML-struktur som ligner på Twentytwenty- plugin. På skriptstakken, foruten jQuery, må du inkludere jQuery Touch Event-biblioteket, sammen med dette pluginet.

 $ (dokument) .ready (funksjon () {$ ('.cocoen'). cocoen ();}); 

Prøv en demonstrasjon nedenfor:

Skjermbildet Bildejämförelse

CodyHouse laget en demonstrasjon av en glidebryter for bilde sammenligning med CSS3, jQuery og noen skript for å håndtere draven og legge til mobilstøtte. Du kan følge den fulle forklaringen og instruksjonene for bruk av dette pluginet her og se demoen her.

Prøv en demonstrasjon nedenfor:

Her er 3 flere:

Cato - Andre plugins trenger jQuery som avhengighet, men Cato krever ingen avhengighet til å jobbe, noe som gjør det til et mer lettvektsbibliotek for glidere i bilde sammenligning. Bruken er enkel, bare ta med Cato's CSS og JS bibliotek og følg HTML-strukturen.

Det finnes muligheter for å 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, fullt lydhør, og fungerer på alle layouter og størrelser. Du kan se live demoer på Codepen.

HTML5 Video Comparison 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.