原文地址: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. 踩过了这些坑,你真的懂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 ...

  2. Linux安全加固及文本处理之awk实践

    1.编写脚本selinux.sh,实现开启或禁用SELinux功能 [root@ansible_centos7 ~]# cat selinux.sh #!/bin/bash # #********** ...

  3. PHP】获取客户端(浏览器)信息、获取客户端系统信息、获取服务器信息

    * 获取客户端浏览器信息 * @param null * @author https://blog.jjonline.cn/phptech/168.html * @return string */ f ...

  4. Redis for OPS 03:数据安全与持久化

    写在前面的话 通过前两节,除了安装部分,其它的更多的是作为了解,除非我们面向实际的开发,当然知道更多总是好的,这样才有吹牛逼的资本. 从本节开始我们主要谈谈作为一个运维,在处理 Redis 的维护的时 ...

  5. nodejs通过钉钉群机器人推送消息

    nodejs 通过钉钉群机器人推送消息 Intro 最近在用 nodejs 写爬虫,之前的 nodejs 爬虫代码用 js 写的,感觉可维护性太差,也没有智能提示,于是把js改用ts(typescri ...

  6. C#数组3(可变数组)

    using System; namespace class1 { class program { static void Main(string[] args) { ][];//这里的行必须定义好,但 ...

  7. 只想听歌曲的高潮部分?让我用python来教你做个音乐高潮提取器!

    有些时候,我们为了设定手机铃声或者发抖音视频时,会耗费大量时间在音乐剪辑上.尤其是想发布大量抖音视频的时候,我们得收集大量的短音乐,这是一个相当耗费时间的工作.那么,这个音乐高潮的提取能不能自动化呢? ...

  8. C#中巧用Lambda表达式实现对象list进行截取

    场景 有一个对象的list,每个对象有唯一的属性Id,并且是从1递增,现在要根据此Id属性进行截取. 其中DataTreeNode 实现 Global.Instance.PrepareCompareD ...

  9. js文件中模块化导入swiper.js文件方法

    es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...

  10. phpstorm xdebug 无法断点调试问题

    最近用phpstorm+xdebug调试一段php代码的时候莫名其妙的无法切入断点调试 本地用的php集成环境是UPUPW ANK V1.1.7 64Bit 选择了集成环境中php版本为7.1.x 搞 ...