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

ScrollReveal.js

　　ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加 data-scrollreveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。

在线演示     立即下载

ScrollMagic

　　ScrollMagic 是一款 jQuery 插件，它让你可以像使用进度条一样使用滚动条。如果你想在特定的滚动位置开始一个动画，并且让动画同步滚动条的动作，或者把元素粘在一个特定的滚动位置，那么这款插件正是你需要的。

在线演示      立即下载

pagePiling.js

　　全屏滚动效果是最近非常流行的网页设计形式，带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器，包括IE8+，支持移动设备。

效果演示     插件下载

WOW.js

　　在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。

效果演示      立即下载

ScrollMe

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

在线演示      源码下载

Parallax.js

　　Parallax.js 是一个简单的，轻量级的的视差引擎，能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候，使用光标的位置来代替。有很多的行为，你就可以设置为任何给定的视差实例。这些行为既可以通过在标记中指定的数据属性或通过构造函数 和 JavaScript API 调用。

效果演示      插件下载

您可能感兴趣的相关文章

本文链接：推荐几款制作漂亮的网页滚动动画的 JavaScript 库

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

推荐几款制作网页滚动动画的 JavaScript 库的更多相关文章

  1. 推荐10 款 SVG 动画的 JavaScript 库

    SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库 ...

  2. 推荐8个实现 SVG 动画的 JavaScript 库

    SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...

  3. 推荐15款制作 SVG 动画的 JavaScript 库

    在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些J ...

  4. 给你推荐10款优秀的 HTML5 动画工具

    HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...

  5. 墙裂推荐4款js网页烟花特效

    以下是几款网页特效和一款软件: http://keleyi.com/keleyi/phtml/jstexiao/1.htm  http://keleyi.com/keleyi/phtml/jstexi ...

  6. 4款开源免费的数据可视化JavaScript库

    概述:交互式数据可视化在很大程度上取决于JavaScript库的任务能力.在这篇文章中,我们将看看四个JavaScript库:D3,InfoVis,Processing.js,和Recline.js. ...

  7. 如何制作网页小动画？——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  8. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  9. JQuery制作网页—— 第四章JavaScript对象及初识面向对象

    1.对象:在JavaScript中,所有事物都是对象,如字符串.数值.数组.函数等. JavaScript中的基本数据类型: number(数值类型)   string(字符串类型)  boolean ...

随机推荐

  1. XMPP即时通信(基础)

      使用第三方框架 XMPPFramework   #import "ViewController.h" #import "XMPPFramework.h" @ ...

  2. C#中的IEnumable与IEnumator接口的简单理解

    IEnumerable接口中的方法是返回IEnumator的对象,集合继承了IEnumerator接口才能实现Foreach方法实现遍历.集合类都继承IEnumable和IEnumerator接口,或 ...

  3. linux安装oracle 11g rac

    安装oracle 11gR2 RAC 一.网络规划及安装虚拟主机 主机名 主机版本 Ip rac1.localdomain Redhat 6.5 RAC节点1 192.168.100.11 rac2. ...

  4. distinct order by 排序问题

    使用类似“SELECT DISTINCT `col` FROM `tb_name` ORDER BY `time` DESC”这样的sql语句时,会遇到排序问题. 以上面的sql语句分析:order ...

  5. webview使用总结及注意事项

    1 网页 调用后台java代码 ,后台处理 一 网页上click事件 <a href="javascript:;" onclick="window.JsNative ...

  6. Android 自定义View 三板斧之三——重写View来实现全新控件

    通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 本文来讨论最难的一种 ...

  7. web.xml详解

    web.xml的作用 web.xml,一个Tomcat工程中最重要的配置文件.web.xml没有其实也可以----只要你确定你的项目里面不需要任何过滤器.监听器.Servlet等等.我试了一下,没有w ...

  8. AMD加载器实现笔记（一）

    之前研究过AMD,也写过一篇关于AMD的文章<以代码爱好者角度来看AMD与CMD>.代码我是有看过的,基本的原理也都明白,但实际动手去实现却是没有的.因为今年计划的dojo教程<静静 ...

  9. 《30天自制操作系统》笔记(06)——CPU的32位模式

    <30天自制操作系统>笔记(06)——CPU的32位模式 进度回顾 上一篇中实现了启用鼠标.键盘的功能.屏幕上会显示出用户按键.点击鼠标的情况.这是通过设置硬件的中断函数实现的,可以说硬件 ...

  10. splice slice

    array的方法中,有这么两个方法, 很久之前接触flex的时候就知道了. 可是总是记不太清. splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目 slice() 方法可从已有的数 ...