使用Animate.css实现页面动画效果
很多网站产品页面都有一个动态效果,当页面向下滚动的时候,页面中的各个元素会加载一些细微的动画。这样做可以让页面载入看起来更具有视觉冲击,并且更好的将用户的视觉焦点引导至页面对应的位置。想要实现这类效果需要利用CSS3中提供的animation属性,让页面元素发生位移变化。当然相对于自己写,有一种更简便的办法,利用现成的样式文件类库就可以轻松实现,并且美观高效;
因为觉得有必要将内容详细整理一下,就将文章内容分成了两篇,分别介绍Animate和wow的使用;这一篇先来整理Animate。
Animate.css是一款利用CSS3中animation创建的,为动画而生的样式库;其中内置了几十种动画效果。通过调用Animate可以非常简单快速的创建页面动画。
Animate.css的使用:
1、从Animate.css官网直接下载样式文件,网站同时还提供了相应的样式效果预览;
2、将样式文件引入页面;
<link rel="stylesheet" href="animate.min.css">
3、直接在页面样式中调用类名,其中animated这个类名是必须添加的,后面则是具体的样式效果类名;
<div class="animated fadeInLeft">
<img src="exp.jpg"/>
</div>
动画类名称如下:
Class Name | |||
---|---|---|---|
bounce | flash | pulse | rubberBand |
shake | headShake | swing | tada |
wobble | jello | bounceIn | bounceInDown |
bounceInLeft | bounceInRight | bounceInUp | bounceOut |
bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp |
fadeIn | fadeInDown | fadeInDownBig | fadeInLeft |
fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp |
fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig |
fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig |
fadeOutUp | fadeOutUpBig | flipInX | flipInY |
flipOutX | flipOutY | lightSpeedIn | lightSpeedOut |
rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight |
rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox |
rollIn | rollOut | zoomIn | zoomInDown |
zoomInLeft | zoomInRight | zoomInUp | zoomOut |
zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp |
slideInDown | slideInLeft | slideInRight | slideInUp |
slideOutDown | slideOutLeft | slideOutRight | slideOutUp |
heartBeat |
除了使用默认的效果外,如果觉得不满意,还可以对效果进行自定义,比如设置效果延迟和速度;使用方法同样是在样式中添加对应的Delay Class 和Slow, Slower, Fast, and Faster Class。
<div class="animated bounce delay-2s">Example</div>
/* delay-2s 2s; delay-3s 3s; delay-4s 4s; delay-5s 5s */
<div class="animated bounce faster">Example</div>
/* slow 2s; slower 3s; fast 800ms; faster 500ms */
除了基本的调用方法外,还可以使用动态调用,通过给JS添加或删除class,可以实现动态效果:
<button id="btn1">添加</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
oBox.classList.add('animated');
oBox.classList.add('flash');
}
oBtn2.onclick = function(){
oBox.classList.remove('flash');
}
</script>
如果动画是无限播放的,可以添加 class infinite。
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class,比如:
$(function(){
$('#dowebok').addClass('animated bounce');
});
有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:
$(function(){
$('#dowebok').addClass('animated bounce');
setTimeout(function(){
$('#dowebok').removeClass('bounce');
}, 1000);
});
animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:
#dowebok {
animate-duration: 2s; //动画持续时间
animate-delay: 1s; //动画延迟时间
animate-iteration-count: 2; //动画执行次数
}
注意添加浏览器前缀。
参考引用:
https://github.com/daneden/animate.css
http://www.dowebok.com/98.html
https://www.cnblogs.com/xiaohuochai/p/7372665.html
本文由 KAYLOG 创作,如非特别声明,本站图片及内容均为原创或翻译;
并遵循 CC BY-NC-SA 4.0协议 许可。转载前请务必署名。
.LUD:Jul 30th , 2020 at 02:05 pm
- 上一篇: 亲密关系心理学(431-439)
- 下一篇: 使用wow.js实现页面滚动动画效果