Всем привет!
Когда дело доходит до разработки веб-сайта, больше всего внимания следует уделить деталям, которые будут способствовать тому, что пользователь захочет остаться на сайте и исследовать его. Есть несколько способов сделать это, начиная от создания красивого эффекта параллакса до анимации всех видов элементов на сайте.
Сегодня я решил поэкспериментировать с этим и объединил анимацию изображения с прокруткой и вот что получилось. Представляю вашему вниманию небольшой плагин jQuery Zoom Scroller, который позволит вам добавить привлекательный эффект зума для изображений во время прокрутки. Идея состоит в том, чтобы, будучи не слишком навязчивым, привлечь внимание пользователей, когда они прокручивают вниз.
Примечание: этот плагин был испытан на Chrome, Firefox и Safari, мобильных и десктопных версиях.
Как использовать jQuery.Zoom-Scroller.js
Как это работает?
Концепция очень проста.Zoom-анимация должна быть анимирована, когда элемент виден в окне просмотра при помощи прокрутки. Разработчики должны иметь возможность легко контролировать анимацию и плагин должен предоставлять несколько функций обратного вызова до, после и во время анимации, так чтобы любой смог расширить функциональные возможности под свои нужды.
Все что должен делать плагин — это определять, когда какой-либо элемент попадает в область просмотра, а так же добавить связанную CSS3-анимацию к этому элементу, пока он находится в области просмотра. Когда элемент выходит из области просмотра CSS3-анимация автоматически будет удалена.
В плагине регистрируются все элементы, а затем при прокрутке мы бежим по этим элементам и смотрим, если верхняя часть элемента видна в нижней части области просмотра, то его необходимо анимировать. Если нижняя часть элемента больше не видна в верхней части области просмотра, то его анимировать нет необходимости.
Вот и вся концепция и реализация плагина. Давайте посмотрим, как вы можете интегрировать его в ваши проекты.
Как использовать
В первую очередь убедитесь, что в блоке вы подключили библиотеку jQuery (желательно 2.0.0 или более позднюю), более подробнее можно узнать тут, а так же подключить jquery.zoom-scroller.js, найти его вы можете тут.Теперь подготовим наш HTML с изображениями, которые хотим анимировать, завернутые в контейнер, как показано ниже:
<body>
..
<div class="zoom-images">
<img src="images/1.jpg">
</div>
<div class="zoom-images">
<img src="images/2.jpg">
</div>
..
</body>
Обертывать наши изображения в контейнер необходимо для предотвращения переполнения при анимации.
Как только это сделано, вызывает функцию обработки контейнера (не самих изображений) следующим образом:
$(".zoom-images").zoomScroller({
initZoom: 1.15,
zoom: 1,
animationTime: 2000,
easing: "ease",
onZoom: function(el, zoomType) {},
beforeZoom: function(el, zoomType) {},
afterZoom: function(el, zoomType) {},
offsetTop: 0,
offsetBottom: 200,
});
Выше приведена функция с параметрами по умолчанию, ваше изображения будут плавно уменьшаться в масштабе, когда вы будете прокручивать страницу вниз. Чтобы поиграться с этим давайте более подробно рассмотрим параметры.
initZoom: позволяет определить начальный масштаб изображения до начала его анимации. 1 это по умолчанию реальный размер изображения.
zoom: определяет, следует увеличивать или уменьшать масштаб при анимации. Если вы хотите увеличивать изображение, убедитесь, что это значение больше чем initZoom. Если же вы хотите уменьшать изображение, то zoom должно быть меньше initZoom. Значение по умолчанию 1.
animationTime: определяет как долго будет происходить анимация. Измеряется в миллисекундах, значение по умолчанию 2000.
easing: здесь вы можете установить ослабление анимации. Опция принимает CSS3 методы замедления такие как “linear”, “ease”, “ease-in”, “ease-out”, “ease-in-out”, или “cubic-bezier” и т.д. Значение по умолчанию “ease”.
onZoom: это функция обратного вызова, которая позволяет вам выполнять любую функцию в процессе анимации. Значение по умолчанию является пустым.
beforeZoom: это функция обратного вызова, которая позволяет вам выполнять любую функцию до анимации. Значение по умолчанию является пустым.
afterZoom: это функция обратного вызова, которая позволяет вам выполнять любую функцию после анимации. Значение по умолчанию является пустым.
offsetTop: эта опция позволяет опрделить верхнюю границу смещения перед инициированием анимации. Значение по умолчанию 0, анимация будет инициироваться, когда один пиксель элемента появляется из верхней части окна просмотра.
offsetBottom: позволяет вам определить нижнее смещение перед началом анимации. Значение по умолчанию 200, так что анимация будет инициирована только тогда, когда по крайней мере 200 пикселей элемента видны в нижней части окна просмотра.
CALLBACK-и
Как уже упоминалось ранее, для этого плагина важно иметь функции обратного вызова, так чтобы вы могли расширить его функциональные возможности. Вот некоторые из них:
onZoom(element, zoomType): эта функция вызывается в то время, когда происходит анимация. "element" это текущий анимированный элемент, а "zoomType" — тип анимации. Возвращаемое значение "in" или "out", которое означает находится ли элемент в области просмотра или нет.
$(".zoom-images").zoomScroller({
onZoom: function(element, zoomType) {
if (zoomType == "in") {
..
} else {
..
}
}
});
beforeZoom(element, zoomType): принимает те же аргументы, что и предыдущая функция, но выполняется до анимации элемента:
$(".zoom-images").zoomScroller({
beforeZoom: function(element, zoomType) {
..
}
});
afterZoom(element, zoomType): принимает те же аргументы, что и предыдущие функции, но выполняется после анимации элемента:
$(".zoom-images").zoomScroller({
afterZoom: function(element, zoomType) {
..
}
});
Ну вот в принципе и все. Еще раз продублирую ссылку на Github и Demo
P.S. Все недочеты перевода прошу присылать в ЛС.
Автор: Vasilui
