Эффект до и после на jquery

Эффект до и после на JQuery

Всем привет, в этой записи я вам покажу как сделать эффект до и после. Мы создадим слайдер из 2 изображений, которые будут переключаться с помощью флажка и создавать эффект изменения до и после.

Посмотреть как это работает можно здесь.

Демо

Для реализации данного эффекта мы будем использовать готовую библиотеку TwentyTwentyhttps://github.com/zurb/twentytwenty

Для начала нам нужно скачать все необходимые файлы и подключить к своему проекту. Для подключения вам нужно скопировать код и поменять пути на свои.

<!--ПОДКЛЮЧАЕМ БИБЛИОТЕКУ JQUERY-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

<!--ПОДКЛЮЧАЕМ ФАЙЛЫ TwentyTwenty -->
<script src="js/jquery.event.move.js" type="text/javascript"></script>
<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />

Теперь давайте добавим изображения которые будем использовать. В качестве контейнера можно использовать любой div с произвольным классом, в моем случае это container1.

<div id="container1">  
<!-- Изображение "ДО" -->
<img src="http://before.png" />
<!-- Изображение "ПОСЛЕ" -->
<img src="http://after.png/" />
</div>

В самом низу кода необходимо разместить следующий скрипт.

$(function(){   
$("#container1").twentytwenty();
});

Этого достаточно чтобы скрипт работал, теперь давайте рассмотрим дополнительные параметры.

Дополнительные параметры

$(function(){
$("#container1").twentytwenty({
default_offset_pct: 0.5, /* Какая часть изображения отображается при загрузке страницы*/
orientation: 'horizontal', /* Ориентация фотографий('horizontal' or 'vertical')*/
before_label: 'January 2017', /* Set a custom before label*/
after_label: 'March 2017', /* Set a custom after label*/
no_overlay: true, /*Не показывать наложение до и после*/
move_slider_on_hover: false, /* Переместить ползунок при наведении мыши?*/
move_with_handle_only: true, /* Позволяет пользователю проводить пальцем в любом месте изображения для управления движением ползунка.*/
click_to_move: false /* Разрешить пользователю нажимать (или касаться) в любом месте изображения, чтобы переместить ползунок в это место.*/
});
});

На этом всё!

Если у вас есть вопросы, пишите их в нашей группе – https://vk.com/progtime 

Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи – https://vk.com/prog_time

В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.

Так же прокачивайте свои навыки на нашем канале – https://www.youtube.com/c/ProgTime

Рекомендованные

Вам также будет интересно

Оставить комментарий

avatar
  Подписаться  
Уведомление о