May 13, 2015
HomeJavascript /Jquery / React / Bootstrap / Web使用Skrollr创建视差滚动效果页面

使用Skrollr创建视差滚动效果页面

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。随着用户对视觉体验的要求不断提高，WEB开发者开始 在网页中加入各种特效元素以满足用户的需求。今天这篇文章给大家推荐一个优秀的视差动画Javascript库——Skrollr.js

 

Skrollr是一个使用了HTML5和CSS3的轻量级JavaScript视差滚动类库。它是不依赖于其它框架的独立类库，可以让你快速打造出 视差滚动效果。它可以让我们给任意元素设置关键帧的CSS属性，然后它会自动形成动画效果。更重要的一点是，使用此类库时不用写复杂的JS代码以及兼容主 流浏览器，适配手机等移动终端等特性。

 

查看演示DEMO 下载源码

如何使用？

首先在页面</body>前加入skrollr库，可以在https://github.com/Prinzhorn/skrollr#rd下载到最新的库文件。然后使用skrollr.init()调用skrollr库。

    <script type="text/javascript" src="skrollr.min.js"></script> 
    <script type="text/javascript"> 
    var s = skrollr.init(); 
    </script> 
</body>

接着，我们来演示下页面元素背景颜色变化效果。当用户向下滚动页面500像素时，div的背景色由#00f渐变为#f00。

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

请看演示：demo1

 

注意，不能使用#00f或者#0000ff来定义背景颜色，应该使用rgb来定义颜色值，当然你不必担心低版本的ie浏览器不支持rgb，skrollr已经做了兼容性处理。

 

下面我们来看下转动效果，使用transform:rotate(0deg)可以让页面元素产生转动，下面的演示当滚动页面时div会做360度转动效果。

<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);"  
data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>

请看演示：demo2

 

skrollr库还提供了非线性动画调用及弹性缓冲效果，可以使用easings选项中的缓存函数如：bounce，swing等。

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);"  
data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

请看演示：demo3

 

接下来我们把“data-500”换成了“data-top”！skrollr不仅可以处理绝对位置，也可以处理相对位置！

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);"  
data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

请看演示：demo4

 

从上面几个例子中我们可以看出，使用元素的属性：data-xxx，添加多个这样的属性，skrollr居然可以自动创建动画过程。

 

在设置data-xxx时，skrollr提供了相对(relative)和绝对(absolute)视图两种方法，请看图解：

Skrollr提供了丰富的使用说明文档，以及javascript方法解说，详情可以阅读项目官网：https://github.com/Prinzhorn/skrollr，同时本站将会推出更丰富的Skrollr应用效果页面讲解文章，敬请期待！

 

本文来源于helloweba.com

Loading

Related Posts

  • 移动前端工作的那些事---前端制作篇之框架篇

    为了更好的提升用户体验，移动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点： 一、Sencha Touch框架是一个重量级的框架、它上手较难，代码复杂，并且需要较强的程序基础才能学习，最开始的时候因为一个项目，想使用Sencha Touch框架，后来工期实在太紧张，根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高，运行起来的速度一般，需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。 二、JQTouch是一个轻量级框架、纯jquery写法，上手比较容易，代码容易理解，加载速度也很快，缺点是配合的移动端效果插件较少，需要很多外部的插件相结合，另外，个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。 三、Jquery-moblie也是一个轻量级框架、纯jquery写法，上手容易，代码容易理解，但由于其绑定的前端效果插件过多，且代码结构有些臃 肿，造成加载速度很慢。尤其是在android系统上测试，速度很慢。用户体验效果不太好，它比较适合开发IPAD或是IOS系统的高端机型。 四、jqMobi也是一个轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手也比较容…

  • 用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法

    每个人都讨厌广告。看电视、看电影、看优酷、看网页时，对满天飞的广告也是深恶痛绝。广告是一个不招人喜欢的东西。但是，对一个中小网站站长/ 博客主来说，广告几乎是唯一的能成支持网站/博客正常运转的资金来源。如果一个博客主，只是无私发布稿件，能坚持几年的，很少。大多数慢慢失去了热情。 火狐浏览器和谷歌浏览器里都有能够屏蔽页面给广告的插件，最有名的是AdBlock和AdBlock Plus。前几天，我做一个统计，看看浏览网站的用户中有多少人使用了AdBlock插件，发现这个数目竟然有总浏览人数的1/5。 1/5是一个不小的数目。如何能让广告位在这1/5的使用了AdBlock插件的用户的页面上用其它图片代替呢？要想做到这一点，首先是要有个办法 知道当前浏览器中使用了AdBlock插件。经过一些测试，我发现，AdBlock对“Ad”或“Google AD”这样的词非常敏感，只要是某个页面元素的ID或css class名中有“Ad”字样的，这个元素基本上都会被AdBlock插件屏蔽掉，也就是 display:none：…

  • 大型网站系统架构的演化

    前言 一个成熟的大型网站（如淘宝、京东等）的系统架构并不是开始设计就具备完整的高性能、高可用、安全等特性，它总是随着用户量的增加，业务功能的扩展 逐渐演变完善的，在这个过程中，开发模式、技术架构、设计思想也发生了很大的变化，就连技术人员也从几个人发展到一个部门甚至一条产品线。所以成熟的系统 架构是随业务扩展而完善出来的，并不是一蹴而就；不同业务特征的系统，会有各自的侧重点，例如淘宝，要解决海量的商品信息的搜索、下单、支付，例如腾讯， 要解决数亿的用户实时消息传输，百度它要处理海量的搜索请求，他们都有各自的业务特性，系统架构也有所不同。尽管如此我们也可以从这些不同的网站背景下， 找出其中共用的技术，这些技术和手段可以广泛运行在大型网站系统的架构中，下面就通过介绍大型网站系统的演化过程，来认识这些技术和手段。   一、最开始的网站架构 最初的架构，应用程序、数据库、文件都部署在一台服务器上，如图：…

Related Posts

About Author

Gideon

Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.