编辑：

Question

我正在尝试使用＆＃34; swiper.js＆＃34; ...

建立一个横向触摸友好型网站

我制作了一些非常简单的css动画，我希望每次进入视口时触发这些动画！喜欢＆＃34; css3-animate-it.js＆＃34;但是横向的！（我试过了，但它似乎没有用）。

动画效果很好，只有两件事：

一个。所有的动画（在幻灯片2,3 ...上）都是在同一时间开始的，所以当到达幻灯片2,3时没有动画......！湾当回到幻灯片1时，我需要动画＆＃34;重启＆＃34;再次...

非常感谢你的帮助！

＆＃34; swiper＆＃34;布局看起来像......

<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 js触发代码。

动漫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
});

编辑：

我试过＆＃34; viewport-checker＆＃34; （和animate.css库）以及相同的一样！动画从幻灯片1开始，而不是在幻灯片2上，动画不会重置！

对于html部分，我要移动的所有div看起来都是这样的：

<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

这对我帮助很大！我正在使用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>

Answer 2

好的......在尝试了很多事情，例如＆＃34; waypoints.inview＆＃34;后，我回到了＆＃34; viewport-checker＆＃34;并找到了解决方案。 （就像每一次，我脑子里都有这种奇怪的声音说：＆＃34;为什么我之前没想过......＆＃34; ^^）

因此。在＆＃34; Swipper＆＃34;有一大堆参数（参见API），在这种情况下有一个有趣的是＆＃34; onSlideChangeEnd＆＃34;。它回调一个函数，将在幻灯片动画后执行!!所以我用它来调用＆＃34; viewportChecker＆＃34;功能

Swipper init和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脚本!!

视口触发css动画（横向网站）

编辑：

2 个答案: