原文地址: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-添加动画效果的更多相关文章

  1. JQuery插件 aos.js

    简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. ...

  2. jQuery插件实例四:手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  3. jQuery插件实例五:手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  4. JQuery实现的模块交换动画效果

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  5. Jquery库自带的动画效果方法记录

    1.显示和隐藏hide()和show() <script type="text/javascript">             $(function() {      ...

  6. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  7. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  8. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  9. 【JQuery插件】扑克正反面翻牌效果

    里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...

随机推荐

  1. MQ的深入理解

    MQ的深入理解 MQ的作用: 解耦合,降低系统与系统之间的频繁改动 MQ的特点: 复杂的系统解耦合 (主系统将数据放入mq,子系统需要的时候直接从mq中取出数据)复杂链路的异步调用(将必要的链路执行完 ...

  2. 《细说PHP》 第四版 样章 第二章 PHP的应用与发展 3

    2.3  PHP的开发优势 每种编程语言都有针对的领域,当然相同领域也有多个编程语言可以选择, 所以需要了解每种编程语言的优势和劣势,才能更好地去选择使用,在对的开发领域充分发挥它的优势,编写出最优质 ...

  3. 数据防泄漏 | 禁止PrintScreen键

    在数据防泄漏软件,通常会禁止 PrintScreen 键,防止通过截屏来将数据保存为图片而导致泄密. 这类软件如果想要实现是比较简单的,但是想要将功能做的强大些,还是需要下功夫的.以前使用过一款数据防 ...

  4. idea创建maven的web项目

    前言 今天搭xfire的时候,我想对xfire进行一下测试,就想弄个web工程试试,发现网上写的很多没有用的,就自己写了一下.十分精简.也介绍了如何解决maven骨架建立项目非常慢的问题. 介绍 1. ...

  5. 2018-8-10-win10-uwp-关联文件

    原文:2018-8-10-win10-uwp-关联文件 title author date CreateTime categories win10 uwp 关联文件 lindexi 2018-08-1 ...

  6. C#数组2(多维数组)

    using System; namespace ConsoleApp3 { struct WuGong { public string Name; public int Attack; } class ...

  7. DataGridView中实现点击单元格Cell动态添加自定义控件

    场景 鼠标点击DataGridView的某个单元格时,此单元格添加一个自定义的控件,这里以 添加下拉框为例 效果 注: 博客主页: https://blog.csdn.net/badao_liuman ...

  8. for与foreach区别

    首先说一下for循环: 格式:for( ; ; ){}; public static void main(String[] args) { List<String> arr = new A ...

  9. 关于在 ASP.NET 的 Global.asax 中 Application_Error 方法内,设置跳转到自定义错误页无效的问题

    转自:https://www.cnblogs.com/OpenCoder/p/5070645.html 在 Global.asax 中的 Application_Error 方法中,使用 Respon ...

  10. 在Dynamics CRM中自定义一个通用的查看编辑注释页面

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复162或者20151016可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 注释在CRM中的显示是比较特别, ...