Содержание
Все приходит глазами, какой бы ни была тема (конкретно говоря об изображениях), лучшим (красивым, красивым) впечатлением о чем-либо всегда будут выборы пользователя. Возможность позволить пользователю просматривать сравнение между двумя изображениями и самостоятельно управлять им может быть увлекательным и полезным для вас. Примечательно, что мы говорим не только о сроках (до и после), но и о сравнении вашего продукта с другими (независимо от того, похожи они или нет).
Как всегда упоминалось в наших топах, не создавайте колесо, как оно уже существует, которое стоит денег, времени и психического здоровья (да, это может быть трудно достичь, если вы начинаете с земли). В этом топе мы собрали 7 самых впечатляющих сравнений между плагинами изображений для Javascript и jQuery, поэтому вы не будете тратить слишком много времени на поиск плагинов и сразу же начнете работать над своим проектом. Наслаждайся этим !
5. Кокоен
Cocoen — это сенсорный плагин jQuery до / после слайдера с requestAnimationFrame. Этот плагин основан в Before-after.js
4. imgSlider
Простой плагин jquery для создания слайдеров сравнения изображений.
3. Сопоставить
Juxtapose — это библиотека JavaScript для создания слайдера изображений до / после. JuxtaposeJS помогает рассказчикам сравнивать две одинаковые медиафайлы, включая фотографии и GIF-файлы. Он идеально подходит для освещения историй, которые объясняют медленные изменения во времени (рост города, рост леса и т. Д.) Или до / после историй, показывающих влияние отдельных драматических событий (стихийные бедствия, протесты, войны, так далее.). Он бесплатный, простой в использовании и работает на всех устройствах. Все, что вам нужно для начала, — это ссылки на изображения, которые вы хотите сравнить.
Вы можете использовать его в горизонтальном или даже в вертикальном режиме.
2. До-после.js
Before-after.js — простой и отзывчивый слайдер сравнения изображений. Хотя идея слайдера «до и после» не нова, и хотя есть даже чистые реализации CSS, которые просто удивительны. Before-after.js очень прост и, вероятно, будет соответствовать всем вашим потребностям.
1. двадцать двадцать
Разработчики, как правило, размещают два изображения рядом друг с другом в надежде, что пользователь увидит ясно и точно, что изменилось. Но есть лучший способ выделить различия между двумя изображениями, способ сфокусировать все.
В этом суть Twenty Twenty, этот плагин jQuery представляет собой инструмент визуального сравнения, который позволяет легко находить различия между двумя изображениями для пользователя с помощью элемента слайдера.
Похвальные грамоты
Beerslider
Beerslider — это ванильный JavaScript, доступный до и после слайдера. Его основная цель — сравнить две версии изображения, например, один и тот же объект, снятый в два разных момента, предварительно отредактированную фотографию и ее обработанную версию, эскиз и законченную иллюстрацию и т. Д. Это может быть особенно полезно с предустановками фотографий. (Пресеты Lightroom, действия в Photoshop и т. Д.). Пиво Slider доступно с клавиатуры — вы можете получить к нему доступ и показать / скрыть изображение «после» с помощью клавиатуры.
Если вы знаете еще один замечательный плагин для сравнения изображений (до и после), поделитесь им с сообществом в поле для комментариев.
