滚动动画animate-scroll扩展
原动画库地址:animate-scroll
扩展动画库下载地址:animate-scroll-ext
由于项目需要,对animate-scroll进行扩展,扩展后修改或增加了以下几点:
对原动画库进行了扩展,扩展后修改或增加了以下几点:
1、原动画库,需要遍历所有dom对象,然后根据对象的"data-animate-scroll"属性来判断是否设置动画,个人认为效率不高,是否设置动画,应该根据当前jQuery实例中选中的元素来设置,这样更满足jQuery的思想。
2、原动画库,在元素每次被显示时,都会播放动画,而我只需要在元素第一次显示时播放动画。
3、原动画库,在元素没有播放动画之前,如果元素超出页面宽度,会出现滚动条,不美观,我修改为,没有播放动画之前是隐藏的,不显示滚动条。
4、增加了一个新的功能,使之能够控制一组对象按照不同的间隔时间顺序播放动画,实现类似"上一个元素动画播放结束后,下一个元素的动画才开始播放"的效果。
滚动动画animate-scroll扩展的更多相关文章
- wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- jQuery动画animate方法使用介绍
用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...
- 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)
超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...
- 使用IntersectionObserver制作滚动动画以及其他记录
前言 最近在重做公司项目的主页,正好新来了个UI,整个都重新设计了一下,动画还挺多的.我之前没有怎么玩过这些,踩了挺多坑,最后找到了目前而言最合适的方法,现在做一个记录. 需要把原来的主页从项目中抽出 ...
- 推荐几款制作网页滚动动画的 JavaScript 库
这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...
- ScrollMe – 在网页中加入各种滚动动画效果
ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- 微信小程序滚动动画,点击事件及评分星星制作!
前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...
随机推荐
- jquery.range.js左右滑动选取数值插件,动态改变进度。
作为一个初级前端工作人员,我最近在做一个关于直播的项目,其中一个功能要求是设置延迟时间, 所以就用到了jquery.range.js这个插件.插件中设置$(".single-slider&q ...
- unix网络io模型
阻塞I/O(bloking I/O) 阻塞IO的特点就是在IO执行的两个阶段(recvfrom和数据从内核空间转移到用户空间)都被block了 非阻塞I/O(non-bloking I/O) 非阻 ...
- 爱上PowerShell
Shell带来的好处是毋庸置疑的,当然也需要大量的时间去练习.PowerShell作为后起之秀, 同时试图打造一款更加人性化,更加易用的Shell.随着PowerShell开源跨平台的战略以及在Win ...
- 你真的懂javascript中的 “this” 吗?
一.前言: 我们知道 "this" 是javascript语言的一个关键字,在编写javascript代码的时候,经常会见到或者用到它. 但是,有一部分开发朋友,对 "t ...
- saltstack布署实践 【配置文件管理-state模块】
那如果要批量修改被管机器的某个配置文件怎么做?以下给出一个最简单案例. 先在主管机器master上查看/etc/salt/master配置文件 看到有以下几行配置文件 # file_roots ...
- CodeForces 632D Longest Subsequence
暴力. 虽然$a[i]$最大有${10^9}$,但是$m$最大只有${10^6}$,因此可以考虑暴力. 记$cnt[i]$表示数字$i$有$cnt[i]$个,记$p[i]$表示以$i$为倍数的情况下, ...
- 【LeetCode】30. Substring with Concatenation of All Words
You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...
- jquery新版本不支持toggle()的解决方法
toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 在1.9以后官方废除了这个方法: 解决如下 在需要调用的js文件下引用 $.fn.toggle = ...
- 如何运用xp_cmdshell 执行多行cmd命令
因为需要利用sql 脚本调用外部程序,所以尝试xp_cmdshell 命令,发现其默认只能执行一行命令,最后找到了下面方法: 将多行cmd 命令处理成bat文件,然后直接利用所在路径+文件来执行: ...
- HTML form的一些属性(第一版)
p,li { white-space: pre-wrap } HTML表单属性总结(第一版) 基本格式为:<input type="类型" name="名字[唯一, ...