5 бесплатных сценариев сравнения изображений

Наложенные ползунки позволяют сравнивать два изображения, обычно до и после, с наложением двух изображений друг на друга. Ползунок, которым можно манипулировать, пользователь может перетаскивать, чтобы показать меньше предшествующего изображения и больше последующего изображения, и наоборот.

Это идеальный способ для определенных сценариев, таких как просмотр суровых последствий атмосферы Марса или изменения городских ландшафтов за полвека.

Для дизайнеров это также отличный способ отразить количество изменений, которые вносит техника или подход в исходное изображение. Существуют различные библиотеки JS, которые вы можете использовать для сравнения. Вот 5 из них.

Twentytwenty

Twentytwenty это визуальный инструмент, позволяющий легко заметить различия между двумя изображениями. Этот инструмент использует jQuery и jquery.event.move для работы. Это очень легко использовать, просто сложите два изображения в контейнер, а затем вызовите twentytwenty (); для контейнера.

Затем:

 $ ( "# Контейнер") twentytwenty (). 

Twentytwenty отзывчива и работает для всех устройств, и если вы используете платформу Foundation, это будет работать из коробки.

накладывать друг на друга

накладывать друг на друга помогает сравнивать два фрагмента мультимедиа (фотографии или GIF) и облегчает выделение изменений между изображениями с течением времени. Этот плагин прост в использовании и работает на всех устройствах. Просто предоставьте два изображения, затем вызовите плагин с доступными опциями.

В опциях вы можете установить начальную позицию слайдера, установить его вертикально или горизонтально, добавить метку и кредит, анимацию и многое другое..

Попробуйте демо ниже:

imgSlider

imgSlider простой плагин jQuery для создания слайдера сравнения изображений. Использование просто и легко: после включения JS и CSS оберните изображения в div с помощью оставил класс для до изображение и право класс для после изображение, затем активируйте его, позвонив .слайдер ();. Опции плагина включают установку начальной позиции ползунка и добавление / отображение инструкций на ползунке.

Позвоните в плагин:

 $ ( 'Слайдер') слайдер (). 

Cocoen

Cocoen позволяет сенсорный с использованием события jQuery-Touch. Его легко применять благодаря структуре HTML, аналогичной Twentytwenty плагин. В стеке сценариев, помимо jQuery, вам необходимо включить библиотеку jQuery Touch Event вместе с этим плагином.

 
   
 $ (document) .ready (function () $ ('. cocoen'). cocoen (););

Попробуйте демо ниже:

Слайдер сравнения изображений

CodyHouse сделал демонстрацию слайдера сравнения изображений с CSS3, jQuery и некоторыми скриптами для обработки события перетаскивания и добавления мобильной поддержки. Вы можете следовать полному объяснению и инструкциям по использованию этого плагина здесь и посмотреть демо здесь.

Попробуйте демо ниже:

Вот еще 3:

Катон - Другие плагины нуждаются в jQuery в качестве зависимости, но Катон не требует никакой зависимости для работы, что делает его более легкой библиотекой для ползунков сравнения изображений. Использовать легко, просто включите библиотеку Cato CSS и JS и следуйте ее структуре HTML.

Существуют варианты, доступные для применения к ползунку, включая добавление всплывающей подсказки, изменение направления ползунка, даже добавление эффекта фильтра, такого как сепия и оттенки серого. Однако вы должны отметить, что в настоящее время Cato поддерживает только WebKit..

До после - Это легкий, полностью отзывчивый и работает на любой макет и размер. Вы можете увидеть живые демо на Codepen.

Слайдер сравнения видео HTML5 - Когда другой разработчик пытается сделать слайдер сравнения для изображений, тогда Дадли Стори применяет слайдер к видео. Чтобы заставить его работать, он использует jQuery и всего несколько строк кода. Посмотрите демо на Codepen, чтобы увидеть действие.