JQuery插件 aos.js-添加动画效果
原文地址:http://www.mamicode.com/info-detail-1785357.html
简介:
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。
使用方法:
在页面中引入aos.css文件,jquery和aos.js文件
<link rel="stylesheet" href="dist/aos.css" />
<script src="js/jquery.min.js"></script>
<script src="dist/aos.js"></script>
HTML结构:
要使用aos动画库,你需要做的就是在需要动画的元素上添加aos属性,例如:
<div aos="animation_name">
aos脚本将会在页面滚动时,在该元素上触发相应的动画
注意,aos-duration的动画持续时间的范围从50-3000毫秒,如果你想设置更大的值,可以在页面中添加下面的CSS代码:
body[aos-duration=‘‘] [aos], [aos][aos][aos-duration=‘‘]{
transition-duration: 4000ms;
}
上面的代码将动画的持续时间修改为4000毫秒。
示例代码:
<div aos="fade-zoom-in" aos-offset="" aos-easing="ease-in-sine" aos-duration="">
<div aos="flip-left" aos-delay="" aos-anchor=".example-selector">
<div aos="fade-up" aos-anchor-placement="top-center">
全局配置:
如果不想单独每个元素做一个动画配置,你可以通过init()方法来统一配置所有元素的动画效果
AOS.init({
offset: ,
duration: ,
easing: ‘ease-in-sine‘,
delay: ,
});
AOS提供了2个额外的配置方法,这些方法只能够在初始化时使用。
禁用AOS:
AOS.init({
disable: ‘mobile‘
});
可以传入3种设备的类型:mobile、phone或tablet。
也可以设置自己的禁用条件,例如在屏幕小于1024像素时禁用AOS:
disable: window.innerWidth <
或者传入一个函数,返回true或false。
disable: function () {
var maxWidth = ;
return window.innerWidth < maxWidth;
}
动画和锚位置:
动画:
JQuery插件 aos.js-添加动画效果的更多相关文章
- JQuery插件 aos.js
简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. ...
- jQuery插件实例四:手风琴效果[无动画版]
手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- JQuery实现的模块交换动画效果
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- Jquery库自带的动画效果方法记录
1.显示和隐藏hide()和show() <script type="text/javascript"> $(function() { ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
- 【JQuery插件】扑克正反面翻牌效果
里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...
随机推荐
- 踩过了这些坑,你真的懂python基础吗?
一.浮点数的计算 思考1:打印结果是什么? a = 0.1 b = 0.2 c = 0.3 print(b == a + a) 思考2:打印结果是什么? a = 0.1 b = 0.2 c = 0.3 ...
- Linux安全加固及文本处理之awk实践
1.编写脚本selinux.sh,实现开启或禁用SELinux功能 [root@ansible_centos7 ~]# cat selinux.sh #!/bin/bash # #********** ...
- PHP】获取客户端(浏览器)信息、获取客户端系统信息、获取服务器信息
* 获取客户端浏览器信息 * @param null * @author https://blog.jjonline.cn/phptech/168.html * @return string */ f ...
- Redis for OPS 03:数据安全与持久化
写在前面的话 通过前两节,除了安装部分,其它的更多的是作为了解,除非我们面向实际的开发,当然知道更多总是好的,这样才有吹牛逼的资本. 从本节开始我们主要谈谈作为一个运维,在处理 Redis 的维护的时 ...
- nodejs通过钉钉群机器人推送消息
nodejs 通过钉钉群机器人推送消息 Intro 最近在用 nodejs 写爬虫,之前的 nodejs 爬虫代码用 js 写的,感觉可维护性太差,也没有智能提示,于是把js改用ts(typescri ...
- C#数组3(可变数组)
using System; namespace class1 { class program { static void Main(string[] args) { ][];//这里的行必须定义好,但 ...
- 只想听歌曲的高潮部分?让我用python来教你做个音乐高潮提取器!
有些时候,我们为了设定手机铃声或者发抖音视频时,会耗费大量时间在音乐剪辑上.尤其是想发布大量抖音视频的时候,我们得收集大量的短音乐,这是一个相当耗费时间的工作.那么,这个音乐高潮的提取能不能自动化呢? ...
- C#中巧用Lambda表达式实现对象list进行截取
场景 有一个对象的list,每个对象有唯一的属性Id,并且是从1递增,现在要根据此Id属性进行截取. 其中DataTreeNode 实现 Global.Instance.PrepareCompareD ...
- js文件中模块化导入swiper.js文件方法
es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...
- phpstorm xdebug 无法断点调试问题
最近用phpstorm+xdebug调试一段php代码的时候莫名其妙的无法切入断点调试 本地用的php集成环境是UPUPW ANK V1.1.7 64Bit 选择了集成环境中php版本为7.1.x 搞 ...