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 ...
随机推荐
- MQ的深入理解
MQ的深入理解 MQ的作用: 解耦合,降低系统与系统之间的频繁改动 MQ的特点: 复杂的系统解耦合 (主系统将数据放入mq,子系统需要的时候直接从mq中取出数据)复杂链路的异步调用(将必要的链路执行完 ...
- 《细说PHP》 第四版 样章 第二章 PHP的应用与发展 3
2.3 PHP的开发优势 每种编程语言都有针对的领域,当然相同领域也有多个编程语言可以选择, 所以需要了解每种编程语言的优势和劣势,才能更好地去选择使用,在对的开发领域充分发挥它的优势,编写出最优质 ...
- 数据防泄漏 | 禁止PrintScreen键
在数据防泄漏软件,通常会禁止 PrintScreen 键,防止通过截屏来将数据保存为图片而导致泄密. 这类软件如果想要实现是比较简单的,但是想要将功能做的强大些,还是需要下功夫的.以前使用过一款数据防 ...
- idea创建maven的web项目
前言 今天搭xfire的时候,我想对xfire进行一下测试,就想弄个web工程试试,发现网上写的很多没有用的,就自己写了一下.十分精简.也介绍了如何解决maven骨架建立项目非常慢的问题. 介绍 1. ...
- 2018-8-10-win10-uwp-关联文件
原文:2018-8-10-win10-uwp-关联文件 title author date CreateTime categories win10 uwp 关联文件 lindexi 2018-08-1 ...
- C#数组2(多维数组)
using System; namespace ConsoleApp3 { struct WuGong { public string Name; public int Attack; } class ...
- DataGridView中实现点击单元格Cell动态添加自定义控件
场景 鼠标点击DataGridView的某个单元格时,此单元格添加一个自定义的控件,这里以 添加下拉框为例 效果 注: 博客主页: https://blog.csdn.net/badao_liuman ...
- for与foreach区别
首先说一下for循环: 格式:for( ; ; ){}; public static void main(String[] args) { List<String> arr = new A ...
- 关于在 ASP.NET 的 Global.asax 中 Application_Error 方法内,设置跳转到自定义错误页无效的问题
转自:https://www.cnblogs.com/OpenCoder/p/5070645.html 在 Global.asax 中的 Application_Error 方法中,使用 Respon ...
- 在Dynamics CRM中自定义一个通用的查看编辑注释页面
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复162或者20151016可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 注释在CRM中的显示是比较特别, ...