Эффект «до-после» для сайта с помощью JS

Мы столкнулись с интересной задачей, а именно реализацией эффекта «до-после» для изображений, данный эффект позволяет наглядно продемонстрировать какие изменения были произведены с изображением с помощью разделительной линии. Для этого нам понадобиться небольшой плагин TwentyTwenty.js работа которого будет обеспечиваться с помощью двух библиотек jQuery. Эффект достаточно простой, но отлично справляется с поставленной задачей. Такой эффект станет отличным дополнением до сайта фотографа.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Давайте посмотрим, что у нас с этого всего получилось.

Шаг 1. HTML

Начать работу с плагином очень просто. Для начала создайте контейнер div и поместите в него два изображения: без эффекта и с эффектом. Пример:

1

2

3

4

<div id='container1'>

<img src='sample-before.png' />

<img src='sample-after.png' />

</div>

Как вы заметили ничего сложного, все элементарно просто.

Эффект до-после для сайта с помощью JS | RUDEBOX

Шаг 2. jQuery

Затем, вызываем плагин twentytwenty():

1

2

3

$(window).load(function() {

$('#container1').twentytwenty();

});

Работа данного плагина зависит от двух библиотек:

jquery
jquery.event.move: обеспечивает функционирование для сенсорных устройств.

Вот и все. Готово!

Читайте также:

JavaScript, JQuery, Плагины, Разработка сайта

Опубликовал Cooper 30.07.2013 в 09:09, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.