Viewport триггер CSS анимация (горизонтальный сайт)

Question

Я пытаюсь сделать горизонтальный сенсорный дружественный сайт с помощью «swiper.js» ...

Я сделал несколько очень простых CSS-анимации, и я хотел бы, чтобы вызвать эти анимации каждый они попадают в окно просмотра! как «css3-animate-it.js», но горизонтально! (Я попробовал, но он, похоже, не работает).

анимация работает отлично, только две вещи:

а. все анимации (на слайде 2,3 ...) начинаются в одно и то же время, поэтому анимация при приходе на слайд 2,3 ...! b. при возвращении на слайд 1 мне снова нужна перезагрузка анимации ...

Большое спасибо за вашу помощь!

"Swiper" макет выглядеть ...

<div class="swiper-container"> 
<div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
     <div class="brandwrap"> 
     <div class="logo"><img></div> 
     <div class="brand moveup">example brandname</div> 
     <div class="slogan moveup">example slogan</div> 
     </div> 
    </div> 
    <div class="swiper-slide">Slide 2</div> 
    <div class="swiper-slide">Slide 3</div> 
</div> 
<div class="swiper-pagination moveup"></div> 
</div> 

В случае, я поставил CSS анимации и в Swiper запуска кода расслоение плотной.

Аниме CSS:

.moveup{-webkit-animation-name:movingup;animation-name:movingup;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;} 
@-webkit-keyframes movingup{ 
from {opacity:0;-webkit-transform:translate(0, 90%);transform:translate(0, 90%);} 
to{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0);} } 
@keyframes movingup{ 
from {opacity:0;-webkit-transform:translate(0, 90%);transform:translate(0, 90%);} 
to{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0);} } 

Swiper JS (код в моих main.js):

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    slidesPerView: 1, 
    mousewheelControl: true 
}); 

Edit:

Я попытался с "viewport-checker" (и animate.css библиотека), но то же самое! Начало анимации на слайде 1, а не на слайде 2, а анимация не сбрасывается!

Для HTML части, все ДИВ я хочу двигаться выглядеть:

<div class="brand animh">Brand Name</div> 

Я положил, что в CSS:

.animv{opacity:1;} 
.animh{opacity:0;} 

И код триггера JS является:

$(document).ready(function() { 
    $('.animh').viewportChecker({ 
     classToAdd: 'animv animated fadeInUp', 
     classToRemove: 'animh', 
     removeClassAfterAnimation: true, // I tried without. 
     repeat: true, 
     scrollHorizontal: true 
     }); 
}); 

Прошу вас, помощь? Большое спасибо!

Answer 1

Хорошо ... После того, как вы попробовали много вещей, таких как «waypoints.inview», я вернулся к «viewport-checker» и нашел решение. (И как всегда, у меня есть этот странный голос в голове, говорящий: «Почему я об этом не думал раньше ...» ^^)

So. В «Swipper» есть дерьмовая нагрузка параметров (см. API), интересным в этом случае является «onSlideChangeEnd». Он вызывает функцию, которая будет выполнена после анимации слайдов !! Поэтому я использую его для вызова функции «viewportChecker».

Swipper инициализация и viewportChecker инициализации кода фьюжн стать:

var swiper = new Swiper('.swiper-container', { 
     pagination: '.swiper-pagination', 
     paginationClickable: true, 
     direction: 'horizontal', 
     slidesPerView: 1, 
     mousewheelControl: true, 
     keyboardControl: true, 
     onSlideChangeEnd: function() { //you can use onTransitionEnd aswell 
      $('.anim').addClass('animh').viewportChecker({ 
     classToAdd: 'animv moveup', // you can use classToAddForFullView aswell 
     classToRemove: 'animh', 
     offset: 100, 
     repeat: true, 
     scrollHorizontal: true 
     });}, 
    }); 

Благодаря Dirk Groenen для его jQuery-viewport-checker сценария !!

Answer 2

Это очень помогло мне!Я использовал FullPage.js, но та же концепция была применена. Я даже смог запустить функцию addClass без необходимости просмотра viewportChecker (мой сайт использует горизонтальную компоновку со слайдами, поэтому события прокрутки не работали в любом случае). В документации для fullPage.js указано событие afterSlideLoad и некоторые другие, которые могут быть полезны для тех, кто работает над чем-то похожим. Вот код, который я закончил с:

<script> 
      $(document).ready(function() { 
       $('#fullpage').fullpage({ 
        paddingTop: '4em', 
        responsiveHeight: '700', 
        slidesNavigation: true, 
        slidesNavPosition: 'bottom', 
        anchors:['firstPage', 'secondPage', 'thirdPage'], 
        afterSlideLoad: function(anchorLink, index){ 
         //Add class 
         $(".animate").addClass("visible").delay(2000); 
        }, 
        onSlideLeave: function(anchorLink, index){ 
         //Remove class 
         $(".animate").removeClass("visible").delay(2000); 
        } 

       }); 
      }); 
    </script>