Довольно часто в интернете можно встретится с интересными эффектами на сайте и многие из них нацелены на то, чтобы сфокусировать на себе интерес пользователя и задержать его на сайте как можно дольше (Youtube: «10 часов с гипно-жабой»).
Увеличение среднего времени на сайте делает сайт более привлекательным для рекламодателей и хорошо влияет на ранжирование в поисковых системах.
Идея
С разработкой одного из таких эффектов довелось столкнуться нашей команде технической поддержки. Клиент — довольно прогрессивный дизайнер, работающий на зарубежный рынок, и ему было важно, чтобы работы, представленные на его сайте могли заинтересовать не только визуальным содержимым, но и функциональным. Таким образом было составлено тех. задание, на эффект «зависания изображений», словно привет из 2000-х когда в Windows после победы в косынке мы наблюдали следующее:
Идея эффекта в том, чтобы прокручивая страницу изображения оставляли за собой плавный «хвост» из своих копий, буд-то сдвинута колода карт.
ГОТОВЫЙ ПРИМЕР
Как это работает
Чтобы реализовать данный эффект необходимо было сперва создать несколько копий изображений и поместить их под главное изображение. Для этого используем метод .clone(), и забегая вперед скажу, что нам понадобится знать количество изображений поэтому мы объявим один раз переменную для количества изображений и будем ее использовать. Создаем простейший цикл создания копий изображений:
var img_count = 4;
$('.img-block').each(function(){
for (i = 1; i <= img_count; i++) {
$(this).find('img:last-child')
.clone()
.addClass("newImg"+i)
.prependTo(this);
}});
Добавляем класс новым изображениям и нумеруем их, чтобы в дальнейшем мы могли задать им свою скорость анимации. Для самого базового эффекта мы зададим всем картинкам одинаковую скорость анимации и абсолютным позиционированием поместим их друг под другом:
img[class^="newImg"]{
position: absolute;
transition: 0.2s;
}
Теперь необходимо добавить смещение при скроллинге. Для этого создадим 3 функции: для скроллинга вверх, вниз и для возвращения картинок назад. Для смещения будем использовать css стиль translate3d, чтобы мы могли позиционировать картинки как нам необходимо не изменяя базовые стили положения изображений:
function moveBtm(img_count, current){
for (var i = 2; i <= img_count; i++) {
j = i+i;
$('.newImg'+i).css('transform','translate3d(0, '+current*j+'px, 0)');
}
}
В функцию добавляем цикл обхода каждого изображения. В смещении будем использовать разницу положения страницы от начала скроллинга до конца, за это отвечает переменная current. Таким образом мы получим разное расстояние смещения при разной силе скролла. А чтобы еще больше усилить эффект смещения мы умножим его на порядковый номер изображения, таким образом картинки не будут складываться в единый блок и будут смещаться друг за другом. С помощью такой манипуляции j = i+i (где i — порядковый номер изображения) мы можем регулировать отступы картинок друг за другом и они будут иметь визуально правильную разницу отступа. Цикл стартуем со второго изображения, поскольку нам необходимо, чтобы первая картинка была неподвижной.
Тоже самое делаем и для скролла вниз:
function moveTop(img_count, current){
for (var i = 2; i <= img_count; i++) {
j = i+i;
$('.newImg'+i).css('transform','translate3d(0, -'+current*j+'px, 0)');
}
}
С той лишь разницей, что по оси Y мы делаем смещение в минус.
Далее нам необходимо сбросить стиль translate3d иначе картинки не будут возвращаться назад до конца:
function clear(img_count){
for (var i = 2; i <= img_count; i++) {
$('.newImg'+i).css('transform','translate3d(0, 0, 0)');
}
}
Проблемы
Итак картинки созданы, смещение задано, теперь настало время для задания действий. В целом уже сейчас можно слушать обычный scroll() и с помощью scrollTop() вычислить наш current, но проблема в том, что стандартный скроллинг слишком грубый и не позволяет нам добится плавности при прокрутки.
К тому же при таком скроллинге картинки будут грубо скакать и добиться плавности будет очень сложно.
Решение с помощью js плагинов
Чтобы это исправить подключим плагин Smooth Scrollbar и реализуем плавную прокрутку на странице. Также сразу добавим плагин Overscroll, входящий в состав данного расширения, и когда пользователь прокрутит страницу до конца она не будет резко упираться в край экрана.
var Scrollbar = window.Scrollbar;
Scrollbar.use(window.OverscrollPlugin)
const scrollbar = Scrollbar.init(document.querySelector('body'), {
damping: 0.08,
plugins: {
overscroll: {
effect: 'bounce',
}
},
});
После подключения плагина Smooth Scrollbar стандартный метод scroll() будет выдавать нам пустое значение, это особенность работы плагина, но разработчики плагина продумали это и добавили собственный метод для прослушивания скролла. Добавляем переменную для записи в нее значения текущей позиции страницы и слушаем дальнейшие действия пользователя с помощью метода scrollbar.addListener():
CurrentScroll = 0;
scrollbar.addListener(() => {
var offset = scrollbar.offset.y;
var NextScroll = offset;
if ((NextScroll > CurrentScroll) && (offset != 0)){
current = NextScroll - CurrentScroll;
moveBtm(img_count, current);
} else if (offset != 0) {
current = CurrentScroll - NextScroll;
moveTop(img_count, current);
}
CurrentScroll = NextScroll;
setTimeout(function(){
clear(img_count);
}, 400);
});
Поскольку scroll() не работает, то в плагине также присутствует метод для отслеживания позиции страницы scrollbar.offset. С его помощью вычисляем наш current по простой формуле:
current = NextScroll - CurrentScroll - если крутим вниз current = CurrentScroll - NextScroll - если крутим вверх
Чтобы понять в какую сторону скроллится страница просто сравниваем прошлое положение и новое:
если NextScroll > CurrentScroll - то крутится вниз, иначе вверх
В конце метода запускам функцию очистки значения в отложенном режиме, чтобы картинки успели доехать до верхней точки и плавно вернуться назад. На этом все. Полный код выглядит так
$(document).ready(function(){
var img_count = 4;
$('.img-block').each(function(){
for (i = 1; i <= img_count; i++) {
$(this).find('img:last-child').clone().addClass("newImg"+i).prependTo(this);
}
});
function moveBtm(img_count, current){
for (var i = 2; i <= img_count; i++) {
j = i+i;
$('.newImg'+i).css('transform','translate3d(0, '+current*j+'px, 0)');
}
}
function moveTop(img_count, current){
for (var i = 2; i <= img_count; i++) {
j = i+i;
$('.newImg'+i).css('transform','translate3d(0, -'+current*j+'px, 0)');
}
}
function clear(img_count){
for (var i = 2; i <= img_count; i++) {
$('.newImg'+i).css('transform','translate3d(0, 0, 0)');
}
}
var Scrollbar = window.Scrollbar;
Scrollbar.use(window.OverscrollPlugin)
const scrollbar = Scrollbar.init(document.querySelector('body'), {
damping: 0.08,
plugins: {
overscroll: {
effect: 'bounce',
}
},
});
CurrentScroll = 0;
scrollbar.addListener(() => {
var offset = scrollbar.offset.y;
var NextScroll = offset;
if ((NextScroll > CurrentScroll) && (offset != 0)){
current = NextScroll - CurrentScroll;
moveBtm(img_count, current);
} else if (offset != 0) {
current = CurrentScroll - NextScroll;
moveTop(img_count, current);
}
CurrentScroll = NextScroll;
setTimeout(function(){
clear(img_count);
}, 400);
});
});