5 Безкоштовні повзунки для порівняння зображень

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

Це ідеальний спосіб для певних сценаріїв, таких як перегляд суворого впливу атмосфери Марса або зміна міських пейзажів за півстоліття.

Для дизайнерів це також чудовий спосіб відобразити обсяг зміни техніки або підходу на оригінальному зображенні. Існують різні бібліотеки JS, які можна використовувати для цілей порівняння. Ось 5 з них.

Двадцятьдцять

Двадцятьдцять є візуальним інструментом, що дозволяє легко помітити відмінності між двома зображеннями. Цей інструмент використовує jQuery і jquery.event.move для роботи. Це дуже простий у використанні, просто складіть два зображення в контейнер, потім зателефонуйте twentytwenty (); для контейнера.

Потім:

 $ ("# container"). twentytwenty (); 

Twentytwenty реагує і працює для всіх пристроїв, і якщо ви використовуєте фреймову основу, це буде працювати з коробки.

Зрівняти

Зрівняти допомагає порівняти два носії (фотографії або GIF) і полегшити для вас виділення змін між зображеннями з плином часу. Цей плагін простий у використанні та працює на всіх пристроях. Просто надайте два зображення, потім викликайте плагін з доступними опціями.

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

Спробуйте демонстрацію нижче:

imgSlider

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

Викличте плагін:

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

Cocoen

Cocoen дозволяє торкатися з використанням події jQuery-Touch. Це легко застосувати через структуру HTML, подібну до Двадцятьдцять підключати. На стеку сценаріїв, крім jQuery, потрібно включити бібліотеку подій jQuery Touch поруч із цим плагіном.

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

Спробуйте демонстрацію нижче:

Повзунок порівняння зображень

CodyHouse зробив демонстрацію повзунка порівняння зображень з CSS3, jQuery і деякими скриптами для обробки події перетягування і додавання мобільної підтримки. Ви можете слідувати за повним поясненням і інструкціями щодо використання цього плагіна тут і побачити демо тут.

Спробуйте демонстрацію нижче:

Ось ще три:

Катон - Інші плагіни потребують jQuery як залежність, але Катон не вимагає ніякої залежності від роботи, що робить його більш легкою бібліотекою для повзунків порівняння зображень. Використання легко, просто включіть CSS і JS бібліотеку Cato і слідуйте за його HTML-структурою.

Існують опції, які можна застосувати на вашому слайдері, включаючи додавання підказки, змінення напрямку слайдера, навіть додавання ефекту фільтра, наприклад сепії та відтінків сірого. Проте слід зазначити, що Cato наразі підтримує лише WebKit.

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

Повзунок порівняння відео HTML5 - Коли інші розробники намагаються зробити повзунок порівняння для зображень, то Дадлі Сторі застосує повзунок до відео. Щоб зробити роботу, він використовує jQuery і лише кілька рядків коду. Дивіться демо на Codepen, щоб побачити дію.