这里集合了几款很棒的制作网页滚动动画的 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. ajax跟取后台 josn 之 josn理解

    json是一种轻量级的数据交换格式,是 JavaScript 原生格式,是理想的数据交换格式. 1.json对象json对象以“{”开始 , 以“}”结束,每个“名称”后跟一个“:”(冒号),‘名:值 ...

  2. 高性能网站架构设计之缓存篇（5）- Redis 集群（上）

    集群技术是构建高性能网站架构的重要手段,试想在网站承受高并发访问压力的同时,还需要从海量数据中查询出满足条件的数据,并快速响应,我们必然想到的是将数据进行切片,把数据根据某种规则放入多个不同的服务器节 ...

  3. 软件工程day4

    使用ps制作了一个icon,将在下个版本中添加,用作程序图标. 参与组例会,得知新功能“吐槽墙”将以聊天室类似的社区形式实现. 提出对现有UI的建议: 对目前的登录窗口的UI不做改动,将标题的“用户登 ...

  4. Hadoop笔记

    教程: Elasticsearch.MongoDB和Hadoop比较:  http://blog.csdn.net/hong0220/article/details/47631409

  5. html表格相关

    <html> <head> <style type="text/css"> thead {color:green} tbody {color:b ...

  6. 基于java的设计模式入门（1）——为什么要学习设计模式

    大年初一,楼主在这里给大家拜年,祝大家码上升职加薪,码上有对象结婚,码上有车有房,幸福安康. 过完年,回学校注册报道之后,大概就要回深圳到公司开始实习了.提高自己,无非就有两种方式,一是看书学习,二是 ...

  7. Linux网络编程系列-TCP编程实例

    实例: client #include <stdio.h> #include <sys/socket.h> #include <netinet/in.h> #inc ...

  8. QT屏蔽qDebug的方法

    在工程文件.pro里面添加 DEFINES += QT_NO_WARNING_OUTPUT\                   QT_NO_DEBUG_OUTPUT 然后rebuild all.这样 ...

  9. Java中反射的理解

    反射 一.什么是反射 Java 反射是Java语言的一个很重要的特征,它使得Java具体了"动态性". 反射用在 Java 身上指的是我们可以于运行时加载.探知.使用编译期间完全未 ...

  10. DDD~领域服务的规约模式

    回到目录 规 约(Specification)模式:第一次看到这东西是在microsoft NLayer项目中,它是微软对DDD的解说,就像petshop告诉了我们MVC如何使用一样,这个规约模式最重 ...