Есть такой код:
$(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?
Комментариев нет:
Отправить комментарий