原动画库地址:animate-scroll

扩展动画库下载地址:animate-scroll-ext

由于项目需要,对animate-scroll进行扩展,扩展后修改或增加了以下几点:

对原动画库进行了扩展,扩展后修改或增加了以下几点:

1、原动画库,需要遍历所有dom对象,然后根据对象的"data-animate-scroll"属性来判断是否设置动画,个人认为效率不高,是否设置动画,应该根据当前jQuery实例中选中的元素来设置,这样更满足jQuery的思想。

2、原动画库,在元素每次被显示时,都会播放动画,而我只需要在元素第一次显示时播放动画。

3、原动画库,在元素没有播放动画之前,如果元素超出页面宽度,会出现滚动条,不美观,我修改为,没有播放动画之前是隐藏的,不显示滚动条。

4、增加了一个新的功能,使之能够控制一组对象按照不同的间隔时间顺序播放动画,实现类似"上一个元素动画播放结束后,下一个元素的动画才开始播放"的效果。

滚动动画animate-scroll扩展的更多相关文章

  1. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  2. 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  3. jQuery动画animate方法使用介绍

    用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...

  4. 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

    超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...

  5. 使用IntersectionObserver制作滚动动画以及其他记录

    前言 最近在重做公司项目的主页,正好新来了个UI,整个都重新设计了一下,动画还挺多的.我之前没有怎么玩过这些,踩了挺多坑,最后找到了目前而言最合适的方法,现在做一个记录. 需要把原来的主页从项目中抽出 ...

  6. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  7. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  8. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  9. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  10. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

随机推荐

  1. andoid x项目的优化 1

    通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的,一般来说,一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其 ...

  2. CloudFoundry虚拟机实例配置DNS

    使用Bosh成功部署CloudFoundry后,在OpenStack上启了一个实例作为DNS服务器专用,配置域名mycloud.com解析到CF API接口的IP:10.68.19.134,然后使用C ...

  3. setprecision、fixed、showpoint的用法总结(经典!!超经典!!)

    首先要加头文件:iomanip 一:setprecision 作用:控制输出流显示浮点数的数字个数,setprecision(n)就是输出的n个数,会有四舍五入. 比如:double s=20.784 ...

  4. Eclipse 中,web项目在Tomcat运行时填写不了Server name

    最近开发项目,从MyEclipse中导入项目到Eclipse中,那些WEB属性都在,可就是不能在Tomcat上运行.纠结一番,最后发现是这个问题: WEB的版本问题. 具体问题看下图: 解决方案: W ...

  5. (二)Python是一门什么样的语言?

    在学习python是一门什么样的语言之前首先需要知道什么是编译和解释? 编译器是把源程序的每一条语句都编译成机器语言,并保存成二进制文件,这样运行时计算机可以直接以机器语言来运行此程序,速度很快; 而 ...

  6. 新mac上安装,查看,设置一些常用的软件

    安装 brew install ~ 查看相关信息 brew info ~ 设置登录自启动 brew services start ~(本质是在~/Library/LaunchAgents/下面加了对应 ...

  7. iOS解析crash日志:

    iOS解析crash日志:我们在ios开发中会碰到的很多crash问题,如果Debug调试模式的话,我们可以往往很容易的根据log的输出定位到导致crash的原因,但对于已经上线的应用,或者是rele ...

  8. 嗯,这个BLOG其实是个更新服务器

    2333 软件:http://dwz.cn/NKSGUI

  9. Python快捷键

    IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列. ALT+P  上一个历史输入内容. ALT+N 下一个历史输入内容. IDLE中按F5可以运行代码.

  10. python reduce使用实例

    通过一个简单的算法来了解reduce的巧用. 构建函数persistence(n),如果n>9,则返回0.否则继续根据n的权重来分解n,如n=999,则分解为9,9,9.那么将9*9*9=729 ...