5 scripts de controle deslizante de comparação de imagem gratuitos
Os controles deslizantes sobrepostos permitem que você faça comparações entre duas imagens, normalmente do tipo antes e depois, com as duas imagens sobrepostas umas às outras. Um slider que pode ser manipulado, pode ser arrastado pelo usuário para mostrar menos da imagem anterior e mais da imagem posterior, e vice-versa.
É a maneira perfeita para certos cenários, como ver os efeitos duros da atmosfera de Marte ou como as paisagens da cidade mudam durante meio século..
Para os designers, também é uma ótima maneira de refletir sobre a quantidade de mudança que uma técnica ou abordagem tem em uma imagem original. Existem várias bibliotecas JS que você pode usar para fins de comparação. Aqui estão 5 deles.
Vinte e vinte
Vinte e vinte é uma ferramenta visual para facilitar a observação das diferenças entre duas imagens. Esta ferramenta utilizando o jQuery e jquery.event.move para trabalhar. É muito fácil de usar, basta empilhar duas imagens em um contêiner e, em seguida, chamar vinte e vinte (); para o contêiner.
Então:
$ ("# container"), vinte e vinte (); Twentytwenty é responsivo e funciona para todos os dispositivos, e se você usar o framework Foundation, isso funcionará imediatamente.
Justapor
Justapor ajuda você a comparar dois pedaços de mídia (fotos ou GIF) e torna mais fácil para você destacar a mudança entre as imagens ao longo do tempo. Este plugin é fácil de usar e funciona em todos os dispositivos. Basta fornecer duas imagens e depois chamar o plugin com as opções disponíveis.
Nas opções, você pode definir a posição inicial do controle deslizante, definir vertical ou horizontal, adicionar rótulo e crédito, animação e muito mais.
Experimente uma demonstração abaixo:
imgSlider
imgSlider é um simples plugin jQuery para fazer slider de comparação de imagem. O uso é simples e fácil: depois de incluir seu JS e CSS, envolva as imagens em div com o esquerda classe para o antes imagem e certo classe para o depois de imagem, em seguida, ativá-lo chamando .controle deslizante ();. As opções do plugin incluem a configuração da posição inicial do controle deslizante e a adição / exibição de instruções no controle deslizante.
Ligue para o plugin:
$ ('. slider'). slider (); 
Cocoen
Cocoen permite tocar com o uso do evento jQuery-Touch. É fácil de aplicar devido a uma estrutura HTML semelhante à Vinte e vinte plugar. Na pilha de scripts, além do jQuery você precisa incluir a biblioteca jQuery Touch Event, ao lado deste plugin.
$ (document) .ready (function () $ ('. cocoen'). cocoen (););
Experimente uma demonstração abaixo:
Comparador de Comparação de Imagens
A CodyHouse fez uma demonstração de um controle deslizante de comparação de imagens com CSS3, jQuery e alguns scripts para lidar com o evento drag e para adicionar suporte móvel. Você pode seguir a explicação completa e instruções de usar este plugin aqui e ver a demonstração aqui.
Experimente uma demonstração abaixo:
Aqui estão mais 3:
Cato - Outros plugins precisam do jQuery como dependência, mas Cato não requer dependência para o trabalho, tornando-a uma biblioteca mais leve para controles deslizantes de comparação de imagens. O uso é fácil, basta incluir a biblioteca CSS e JS da Cato e seguir sua estrutura HTML.
Há opções disponíveis para aplicar em seu controle deslizante, incluindo a adição de dicas de ferramentas, a alteração da direção do controle deslizante e até a adição de efeitos de filtro, como sépia e escala de cinza. No entanto, você deve notar que Cato atualmente só tem suporte para o WebKit.
Antes Depois - Isso é leve, totalmente responsivo e funciona em qualquer layout e tamanho. Você pode ver as demonstrações ao vivo no Codepen.
Controle deslizante de comparação de vídeos em HTML5 - Quando outros desenvolvedores tentam fazer o controle deslizante de comparação de imagens, o Dudley Storey aplica o controle deslizante ao vídeo. Para fazer o trabalho, ele utiliza o jQuery e apenas algumas linhas de código. Veja a demonstração no Codepen para ver a ação.
