这里集合了几款很棒的制作网页滚动动画的 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. CentOS7 服务器 JDK+TOMCAT+MYSQL+redis 安装日志

    防火墙配置(参考 CentOS7安装iptables防火墙) 检查是否安装iptables #先检查是否安装了iptables service iptables status #安装iptables ...

  2. Java学习笔记（六）

    期末课程选题:QQ登录界面.好友列表界面及聊天框界面. 功能实现:简单的功能可实现,如:点击登录进入好友列表界面:点击好友可进入聊天框:可实现简单聊天功能:聊天可输入及输出,可选择私聊或群聊,可获得当 ...

  3. Swift不同storyboard之间的交互

    如何实现多个Storyboard之间的切换 正如大家所知道的,Main-board是·程序运行的入口,如果找不到就会抛出异常,打开plist文件可以看到关于Main-board的描述,特别的制定了其b ...

  4. ASP.NET 开发必备知识点(2)：那些年追过的ASP.NET权限管理

    一.前言 在前一篇文章已经为大家介绍了OWIN和Katana,有了对他们的了解之后,才能更好地去学习Asp.net Identity,因为Asp.net Identity的实现集成了Owin.其实在A ...

  5. Gradle中的buildScript代码块

    在编写Gradle脚本的时候,在build.gradle文件中经常看到这样的代码: build.gradle 1 2 3 4 5 6 7 8 9 buildScript { repositories ...

  6. 关于node.js的误会

    昨天写了篇博客,介绍了一下我对node.js的第一次亲密接触后的感受,以为node.js很小众,出乎我意料很多人感兴趣,并且对博客中的细节问题做了评论,最多的是围绕node.js的异步与单线程展开的, ...

  7. Tomcat-MAC下添加Tomcat环境并运行

    MAC下添加Tomcat环境运行 1. 首先,下载tomcat.http://tomcat.apache.org/index.html 2. 然后解压.用终端进入到解压文件夹下的bin目录.  ...

  8. Java中main()的args的知识点浅谈

    我们先来了解下Java中main()方法的默认定义格式: public static void main(String[] args){ }1.main方法是程序执行的入口,除了args这个形参变量可 ...

  9. 大型网站系统与Java中间件实践

    大型网站系统与Java中间件实践(贯通分布式高并发高数据高访问量网站架构与实现之权威著作,九大一线互联网公司CTO联合推荐) 曾宪杰 著   ISBN 978-7-121-22761-5 2014年4 ...

  10. Android WebView 开发教程

    声明在先:必须在AndroidMainfest.xml 里面声明权限,否则在Java里面编写的所有WebView浏览网页的代码都无法正常使用 <uses-permission android:n ...