Bxslider文本效果animation .css

我正在为我的网站设置一个滑块，我遇到了一些问题。

我使用bxslider，我想通过添加animate.css为每张幻灯片中的文本添加动画。animation .css非常简单:只需将"animated"和动画名称作为类添加到动画元素中。

基本上，我希望文本在滑块完成到幻灯片的过渡后以动画形式出现在幻灯片上。我还希望文本在与下一个文本过渡到下一张幻灯片之前淡出。

由于滑块有回调函数，我认为直接添加必要的css类就可以了。

JQUERY

$(document).ready(function(){
    $(".bxslider").bxSlider({
        auto: true,
        startSlide: 0,
        slideWidth: 640,
        onSlideAfter: function(){
        $(".title").addClass("animated bounceInRight");
        $(".text").addClass("animated bounceInRight");
        },
        onSlideBefore: function(){
        $(".title").removeClass("animated bounceInRight");
        $(".text").removeClass("animated bounceInRight");
        }
  });
});

<ul class="bxslider">
  <li><img src="" />
<h1 class="title animated bounceInRight">TITLE 1</h1><p class="text animated bounceInRight">
  text text text text text text
  text text text text text text
 </p></li>
  <li><img src="" /><h1 class="title">TITLE 2</h1><p class="text">
  text text text text text text
  text text text text text text
 </p></li>
  <li><img src="" /><h1 class="title">TITLE 3</h1><p class="text">
  text text text text text text
  text text text text text text
 </p></li>
  <li><img src="" /><h1 class="title">TITLE 4</h1><p class="text">
  text text text text text text
  text text text text text text
 </p></li>
</ul>

CSS 1(我添加到滑块的默认CSS)

.bxslider { padding: 0; margin: 0; list-style: none; } .title { position: absolute; top:100px; left: 100px; color: #FFF; font-family: Helvetica; } .text { display: block; position: absolute; top:200px; left: 200px; color: #000; font-family: Helvetica; width: 300px; background: #FFF; -webkit-animation-delay: 1s; /* to delay text "entrance" */ }
CSS 2 (animation "trigger"…不同的动画只是CSS3动画和关键帧等等)

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
我放了一个示例滑块在线:bxslider test.

目前有几个问题。我总是提到"文本"，但我指的是<h1>和<p>标签。

First:第一张幻灯片正确显示动画，文本显示动画。在第二张幻灯片上，文本已经可见，然后动画开始。我想让文本"贯穿"动画。

第二个:我尝试添加fadeout效果(再次通过添加和删除相应的CSS-classes)。它不会工作，淡出将发生在过渡到下一张幻灯片。我想我在添加和删除类时犯了一些基本错误，但我想不出来。

第三:我可以在每张幻灯片上使用不同的入口效果吗?
第四个: Safari中似乎有一个错误。在我的电脑上(Safari &;Chrome)，幻灯片播放从第一张幻灯片开始。在Safari的web服务器上，最后一张幻灯片首先是可见的，然后它通过第一张幻灯片直接滚动到第二张幻灯片…很奇怪。在Chrome中，幻灯片看起来很正常。根据Safari的日志
，代码没有问题。
如果有人能帮我解决这个问题，那就太好了，至少前两个问题。

谢谢!

怎么做:

HTML:

<section class="slider"> <ul class="bxslider" > <li><img src="foto-1.jpg"/> <div class="one slider-text">your text</div> </li> <li><img src="foto-2.jpg"/> <div class="slider-text">your text 2</div> </li> <li><img src="foto-3.jpg"/> <div class="slider-text">your text3 </div> </li> </ul> </section>
CSS:

.slider .slider-text { font-size: 250%; color: #fff; position: absolute; z-index: 9999; text-align: center; bottom: 20%; width: 100%; } .slider-text { visibility:hidden; } .slider-text.active-slide { visibility: visible; }
JQUERY:

$('.bxslider').bxSlider({ auto: true, preloadImages: 'all', mode: 'horizontal', captions: false, controls: false, pause: 5000, speed: 800, onSliderLoad: function () { $('.bxslider>li .slider-text').eq(1).addClass('active-slide'); $(".slider-text.active-slide").addClass("wow animated bounceInRight"); }, onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { console.log(currentSlideHtmlObject); $('.active-slide').removeClass('active-slide'); $('.bxslider>li .slider-text').eq(currentSlideHtmlObject + 1).addClass('active-slide'); $(".slider-text.active-slide").addClass("wow animated bounceInRight"); }, onSlideBefore: function () { $(".slider-text.active-slide").removeClass("wow animated bounceInRight"); $(".one.slider-text.active-slide").removeAttr('style'); } });
我使用
:
BxSlider v4.1.2
jQuery v1.11.2
最新动画。css

您可以使用to:
wow.js

您可以简单地使用wow js并正常添加类每次重新初始化wow

$(document).ready(function(){ new WOW().init(); $('.bxslider').bxSlider({ auto: true, adaptiveHeight: true, onSlideAfter: function () { new WOW().init(); }, onSlideBefore: function () { new WOW().init(); } }); });

相关内容

最新更新

热门标签：