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

Question

[HamSter]

Есть такой код пример на CodePen:

<div class="js-page-scroll">
    <main>
      <section>
        <h2>1</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>2</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      ...
      <section>
        <h2>5</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
    </main>
  </div>

$(".js-page-scroll").mCustomScrollbar({
        	axis:"x",
            theme:"dark-3",
            // scrollbarPosition: 'outside',
            advanced:{ autoExpandHorizontalScroll:true },

            callbacks:{
                    whileScrolling:function(){
                    	
                    	new WOW().init();
                        
                    }
                }
        });

Использую кастомный скролл (горизонтальный) - malihu custom scrollbar

Для анимации - animate.css и wow.js

Суть в том, что при горизонтальном скролле, текст в блоках появлялся (анимировался) плавно и соответственно последовательно (как при использовании wow.js). Т.е. wow.js но для горизонтальной прокрутки.

Вопрос: как настроить wow.js (или, возможно, есть какой другой плагин) для горизонтального скролла? || Как настроить animate.css для кастомного скролла (при прокрутке блоки появлялись плавно, последовательно)?

Answer 1

[Kovalsky]

Не знаю насчет настройки и других плагинов, но мне кажется проще будет на элементы вешать класс wow во время их появления во вьюпорте, эффект тот же будет. Можно опираться на этот алгоритм. Еще как вариант можно форкнуть WOW и переписать его чуть-чуть, делов на несколько минут.

Кстати, whileScrolling это как раз то что нужно, разве что вы неправильно его используете - он вызывается постоянно при скролле, wow не нужно инициализировать каждую десятую долю секунды.

UPD: вешать класс wow не получилось, новые элементы почему-то не подхватываются. Если вас устроит независимость от wow, то можете объявить CSS класс horizontal-wow:

.horizontal-wow {
    visibility: hidden;
    animation-name: null;
}

Соответственно, в разметке надо будет использовать его вместо wow. Скрипт получился некрасивый:

Без WOW, только animate.css

jQuery.fn.extend({
    custom_onAppearanceApply: function( f, container ) {
        var $container = $( container ),
            container_width = $container.width(),
            array_of_$elements = [];
        this.each(function(i,el) {
            array_of_$elements.push($( el ));
        })
        scrollHandler();

        function watchProcessedElements(array_of_indexes) {
            var l, i;
            for (l = array_of_indexes.length, i = l - 1; i > -1; --i) {
                array_of_$elements.splice(array_of_indexes[i], 1);
            }
        }
        function scrollHandler() {
            var i, l, processed = [];
            for ( l = array_of_$elements.length, i = 0; i < l; ++i ) {

                if (-container.mcs.left + container_width > array_of_$elements[i].position().left) {
                    f.call( array_of_$elements[i] );
                    processed.push(i); 
                }
            }
            if (processed.length) {
                watchProcessedElements(processed);
            }
        }

        return {
            scrollHandler: scrollHandler
        };
    }
})

$(window).load(function() {
    if ($(".js-page-scroll").length) {
        var scrollHandler = $.noop,
            scrollHandlerWrapper = function() {
                scrollHandler();
            };

        $(".js-page-scroll").mCustomScrollbar({
            axis: "x",
            theme: "dark-3",
            advanced: { autoExpandHorizontalScroll: true },
            callbacks: {
                onInit: function() {
                    scrollHandler = $('.horizontal-wow').custom_onAppearanceApply(function () {
                        var old_animation = this.css('animation-name'),
                            $this = this;

                        $this.css('animation-name', 'clear').addClass('animated');

                        setTimeout(function() {
                            $this.css({
                                'visibility': 'visible',
                                'animation-name': ''
                            }); 
                        })

                    }, this).scrollHandler;
                },
                whileScrolling: scrollHandlerWrapper
            }
        });
    }
});

Comments

[HamSter]

СУПЕР! СПАСИБО!!!