分享一个实用插件（页面滚动触发动画）以及其内部的所有动画属性值

Posted 2020-09-17 Linoa

个人不太擅长实用JQuery插件，比较喜欢使用原生JS代码，但是制作网站时的难度很大。

今天推荐一个比较实用的插件

地址为：

http://www.htmleaf.com/jQuery/Layout-Interface/201704274479.html

        <link rel="stylesheet" href="css/animate.min.css">
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/scrolla.jquery.min.js"></script>

为执行动画的dom元素添加class="animate"

通过data-animate="动画效果"属性设置动画效果

        <div class="animate" data-animate="rubberBand"
             data-duration="1.0s"
             data-delay="0.1s">
        动画div内的文字
        </div>   

data-animate：设置动画效果

data-duration：设置动画持续时间

data-delay：设置动画延迟

在body之后添加初始化插件（一定要在dom元素加载之后进行）

        <script type="text/javascript">
            $(\'.animate\').scrolla();
        </script>

 

运行效果图如下：

 

 

可以写如下参数来设置配置效果

　　　　　$(\'.animate\').scrolla({
                mobile: false, 
                once: false 
         });      

mobile：移动端是否应用

once：是否只执行一次

下面是我自己总结的所有动画效果属性值：
bounce

flash

pulse

rubberBand

shake

headShake

swing

tada

wobble

jello

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutUp

bounceOutLeft

bounceOutRight

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRightBig

fadeInRight

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipInY

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

 

 

插件的使用会使网页布局更加方便，但是每个插件有每个插件不同的用法，使用时应注意。

插件也会导致网页加载慢的情况，不需要的插件不要过度使用