ビューポートトリガーCSSアニメーション（水平ウェブサイト）

Question

私は「swiper.js」を使用して、水平タッチフレンドリーなウェブサイトを作るしようとしている...

私はいくつかの本当に簡単なCSSアニメーションを作った、と私は毎回、これらのアニメーションをトリガしたいと思いますこれらはビューポートに来る！ は「css3-animate-it.js」のようですが、水平方向です！ （私はそれを試みましたが、うまくいかないようです）。

：

アニメーションは、ちょうど2つの事を正常に動作します。すべてのアニメーション（スライド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やJS 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 
}); 

編集：私は "viewport-checker"（とanimate.cssてみました

ライブラリ）も同様ですが同じです！アニメーションはスライド1で始まり、スライド2で始まらず、アニメーションはリセットされません！

HTML部分については、私はそのように見える移動したいすべてのdiv：

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

とJSトリガコードは次のとおりです：

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

は、私はCSSでいることを置くには

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

助けをお願い致します。どうもありがとう！

Answer 1

Ok ... "waypoints.inview"などの多くのことを試した後、私は "viewport-checker"に戻って解決策を見つけました。 （いつものように、私は頭の中でこの奇妙な声をしています。「なぜ前にそれについて考えなかったのですか？」^^）

So. "Swipper"には、パラメータの糞の負荷があります（APIを参照）。その場合、興味深いのは "onSlideChangeEnd"です。これは、スライドアニメーションの後に実行される関数をコールバックします。だから私は "viewportChecker"関数を呼び出すために使用します。

Swipper initとviewportChecker初期化コードの融合はなるために：彼のjQuery-viewport-checkerスクリプトのディルクGroenenへ

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 
     });}, 
    }); 

感謝!!

Answer 2

これは私を助けてくれました。私はFullPage.jsを使用していましたが、同じ概念が適用されています。私はviewportCheckerを必要とせずにaddClass関数をトリガーすることさえできました（私のサイトはスライド付きの水平レイアウトを使用するので、スクロールイベントは動作しませんでした）。 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>