Все для веб-дизайнера
Эффект «до-после» для сайта с помощью 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> |
Как вы заметили ничего сложного, все элементарно просто.
Шаг 2. jQuery
Затем, вызываем плагин twentytwenty():
|
1 2 3 |
$(window).load(function() { $('#container1').twentytwenty(); }); |
Работа данного плагина зависит от двух библиотек:
- jquery
- jquery.event.move: обеспечивает функционирование для сенсорных устройств.
Вот и все. Готово!
| Опубликовал Cooper 30.07.2013 в 09:09, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
