javascript - 如何让轮播图上的文字有动画效果？

问题描述

问 题

最近有个项目需求要让轮播图上的文字有动画效果；
我以前做的都是切一整个banner，然后用一个插件解决。
现在要把背景图层和文字图层一个一个切下来来做，有什么简单快速的方法实现效果吗？

--------------------------分割-------------------------------------

<div class="content">
                <ul>
                    <li style="background-image: url(images/banner1.png)">
                        <div class="bd1-02 wow fadeInLeft" data-wow-delay="0.3s"></div>
                        <div class="c-width">
                            <div class="bd1-01 wow flipInX " data-wow-delay="0s"><img src="images/bd1-01.png"></div>
                            <div class="bd1-03 wow fadeInLeft " data-wow-delay="0.6s"><img src="images/bd1-03.png"></div>
                            <div class="bd1-04 wow fadeInLeft " data-wow-delay="0.8s"><img src="images/bd1-04.png"></div>
                            <a href="#" target="_blank" class="bd1-btn wow fadeInLeft " data-wow-delay="1s">在线了解软件详情</a>
                        </div>
                    </li>
                    <li style="background-image: url(images/banner3.png)" >
                        <div class="c-width">
                            <div class="bd2-02 wow flipInY" data-wow-delay="0s"><img src="images/bd2-01.png"></div>
                            <div class="bd2-box wow zoomInUp" data-wow-delay="0.5s">
                                <a href="" class="bd2-btn">在线了解软件详情</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

使用wow方法的时候，第一页是没有问题，但第二页无法触发动画效果，
必须要跳转到第二页时动一下滚动条才能把动画触发，不知道是什么原因造成的？

解决方案

wow.js是当元素出现在视野里的时候开始执行动画的，banner是display：none；到display：block；状态切换的，所以可以用wow.js.

这篇关于javascript - 如何让轮播图上的文字有动画效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！