Як зробити інтерактивне порівняння двох фотографій на jquery.

Відео: Усна частина ЄДІ з англійської мови: порівняння фотографій

Всім привіт! Сьогодні я покажу, як можна зробити інтерактивне порівняння за допомогою простого JQuery плагіна - TwentyTwenty.

Знайти опис і приклади ви можете тут. Там же ви можете завантажити цей плагін, натиснувши соотвествующих кнопочку.

Тепер поговоримо про те, як це все запустити. Для початку скачайте бібліотеку JQuery і JQuery Event Movie, щоб підтримувалися мобільні пристрої.

Тепер створимо контейнер з двома фотографіями

Відео: ЄДІ 2017 англійську мову усна частина завдання 4 порівняння фотографій

id="Container1"gt; 
src="Sample-before.jpg"gt; 
src="Sample-after.jpg"gt;

Коли картинки будуть завантажені, викликаємо плагін, передавши йому назву контейнера.

$(window).load(function(){ 
 $("# Container1").twentytwenty() - 
}) -

Або ви можете просто додати потрібний клас до контейнера

Відео: Завдання C6 ЄДІ з англійської мови

id=`Container1`class=`Twentytwenty-container`gt; 
src=`Sample-before.jpg`gt; 
src=`Sample-after.jpg`gt;

У даного плагіна є один параметр - відступ зліва.

default_offset_pct:0.5

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

Отже, сьогодні ми розглянули простий плагін для бібліотеки JQuery - TwentyTwenty, який дозволяє дуже швидко зробити якісний ефект "До і після".

Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі