Страницы

Поиск по вопросам

понедельник, 4 марта 2019 г.

Кастомный горизонтальный скролл с animate.css

Есть такой код:
$(window).load(function(){ // Horizontal scroll if($(".js-page-scroll").length){ $(".js-page-scroll").mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition: 'outside', advanced:{ autoExpandHorizontalScroll:true }, callbacks:{ whileScrolling:function(){ new WOW().init(); } } }); } }); main { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; } section { display: block; width: 300px; border: 1px solid #000; padding: 1rem; } .js-page-scroll { width: 100%; overflow-x: auto; }

1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?


Использую кастомный скролл (горизонтальный) - malihu custom scrollbar
Для анимации - animate.css и wow.js
Суть в том, что при горизонтальном скролле, текст в блоках появлялся (анимировался) плавно и соответственно последовательно (как при использовании wow.js). Т.е. wow.js но для горизонтальной прокрутки.
Вопрос: как настроить wow.js (или, возможно, есть какой другой плагин) для горизонтального скролла? || Как настроить animate.css для кастомного скролла (при прокрутке блоки появлялись плавно, последовательно)?


Ответ

Можно сделать обычную проверку на наличие элемента в зоне видимости, без всяких доп плагинов.
$(this).offset().left < windowWidth - проверяем вошел ли элемент в зону видимости "справа"
$(this).offset().left > -$(this).width() - проверяем вошел ли элемент в зону видимости "слева"
Если вошел, до добавляем ему класс анимации, если ушел, то удаляем
$(window).load(function(){ var windowWidth = $(window).width(); var thisLeft, thisWidth; function animateBlocks(){ $('.animated').each(function(){ thisLeft = $(this).offset().left; thisWidth = $(this).width(); if(thisLeft < windowWidth && thisLeft > -thisWidth){ $(this).addClass('fadeInUp'); }else{ $(this).removeClass('fadeInUp'); } }); } animateBlocks(); // Horizontal scroll if($(".js-page-scroll").length){ $(".js-page-scroll").mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition: 'outside', advanced:{ autoExpandHorizontalScroll:true }, callbacks:{ whileScrolling:function(){ animateBlocks(); } } }); } }); main { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; } section { display: block; min-width: 300px; border: 1px solid #000; padding: 1rem; } .js-page-scroll { width: 100%; overflow-x: auto; }

1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?


Комментариев нет:

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