Всім привіт! Сьогодні я покажу, як можна зробити інтерактивне порівняння за допомогою простого JQuery плагіна - TwentyTwenty.
Знайти опис і приклади ви можете тут. Там же ви можете завантажити цей плагін, натиснувши соотвествующих кнопочку.
Тепер поговоримо про те, як це все запустити. Для початку скачайте бібліотеку JQuery і JQuery Event Movie. щоб підтримувалися мобільні пристрої.
Тепер створимо контейнер з двома фотографіями
Коли картинки будуть завантажені, викликаємо плагін, передавши йому назву контейнера.
Або ви можете просто додати потрібний клас до контейнера
У даного плагіна є один параметр - відступ зліва.
Як ви можете бачити вище, за замовчуванням відступ від лівого краю дорівнює половині, тобто повзунок буде по середині. Але ви можете, звичайно ж, змінити це значення на те, що вам потрібно.
Отже, сьогодні ми розглянули простий плагін для бібліотеки JQuery - TwentyTwenty. який дозволяє дуже швидко зробити якісний ефект "До і Після".
Дякую за увагу і удачі!
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так: