> 精选几个不错整站视觉滚动效果插件
网页在滚动的过程中给用户一个视差效果的体验，其中的背景图片和图像的移动速度至中心。通过使用视差一些深奥及额外信息给你的网站是惊人的。今天向大家分享精选几个不错整站视觉滚动效果插件
SuperScrollorama是一个惊人的和充满趣味的插件。包括有吸引力和影响力的网站滚动动画效果。此外，用户还可以包括多种过渡效果，如取消固 定的文本，擦拭，缩放，旋转和褪色。也给出了许多其他的效果，如 coloring, flinging, bounces, page wipes, smushing, scaling, horizonta水平页幻灯片等。
它有一个分层系统，并支持多层次用户需要。真视差具有简单方便的配套，外部的控制和播放支持。此外，它调节鼠标活动的方向，也支持倒视差和自定义对焦点。
滚动视差插件的查询的主要目的是用户鼠标滚轮以形成视差的动画效果。当我们向下滚动网页应用视差背景的变化率从页面滚动，产生深度感。这个滚动视差插件的另一个用途是绝对好用。只要通过图像和插件持有的形象和窗口宽度和150％的高度拉长
jQuery scroll path是一个非常有用的插件，允许用户自己的自定义滚动路径分类。为了得到正确的路径的路径过线的画布开始插件时，可以促进支持。成功可以滚动鼠标滚轮，空格键和向上/向下箭头键。空格键运行速度更快，同时保持空间将向后滚动箭头键和按Shift比较。
提供了一个网站的几个滚动简报甲板。用户可以使用左，右箭头键来变换的幻灯片。这个插件是容易体现网页的网站，在幻灯片的形状。用户可以通过包括特定类的元素动画的幻灯片。此外，这个插件是非常简单和容易地创建的视差效果，全屏图像以及动画和网站。更有趣的用户体验。
Scroll Content Presenter是一个jQuery插件，允许用户创造出一个迷人的，独特而美丽的风格导航部署颜色以及动画向参观者呈现你的网站内容。滚动内容展示是一种流行的jQuery插件，为您创建一个导航菜单，基于用户的HTML的结构。这个最新的插件具有一定的娱乐性和自发性的功能，自定义滚动条，视差动画，水平和垂直导航，使用引导构建，CSS3过渡。此外，它涵盖了一些更有趣的功能，为您生成一个导航菜单。
他们可以轻松地设置任何HTML容器或因素的背景时滚动页面滚动。这个插件也容易创造一个独特的视差??效果。您可以设置速度，缓和每一个滚动的距离，完全可定制参数。
Prinzhorn/Skrollr视差滚动实际上是一个独立的库，旨在为移动以及桌面在短短3.8K桌面。还多了6.5K的移动支持，不是强制性的。它要求只是简单的CSS和要求没有JavaScript技巧，设计师以及友好。skrollr远远超过只是一个简单的视差滚动。 Prinzhorn，/ Skrollr是一个完整的滚动动画库。
文章作者：本文地址：版权所有 & 转载时必须以链接形式注明作者和原始出处！
后才能发布评论.
HTML580社区
12345678910您的位置：首页 & javascript, resource & 滚动视差网站工具与教程
滚动视差网站工具与教程
神飞 发表于 06. dec, 2012, 分类: javascript, resource , 12 条评论 »标签：工具 & 开源 & 滚动视差 & 视差滚动
滚动视差绝对是今年最炫的设计风格，也是最近的设计趋势，之前我们分享了《60多个超炫的视差滚动效果网站设计欣赏》相信让很多人都耳目一新，现在整理几个比较不错的开源滚动视差项目，它们大都托管在github上，大家可以用在自己的项目中，当然，从中获取灵感自己开发会更好～～
scrollorama
curtain.js
jquery-parallax
stellar.js
parallax.js
a simple parallax scrolling technique via nettuts+
恩，先就这些，如果你有发现其它关于滚动视差的开源项目或实现教程，欢迎与我们分享。
整理自：/tools/parallax-tools-and-techniques
中文原文：滚动视差网站工具与教程
请尊重版权，转载请注明来源，多谢～～
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于isux团队
follow me on
@qianduan。
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。
您或许也会喜欢：网站性能优化工具大全20款超棒的响应式设计测试书签应用开源：browserplus即将开源60多个超炫的视差滚动效果网站设计欣赏12个对网页设计师非常有用的图片优化工具132 个 web 设计工具(上)web 开发工具箱：120个 web 开发工具(下)ianimator-css3动画制作工具web 开发工具箱：120个 web 开发工具(上)cssgaga：前端开发和部署利器
发表于dec 6, 2012 at 09:06
很好很强大！
发表于dec 8, 2012 at 10:15
视差滚动效果的确很炫，但需要很良好的设计理念在做支撑。否则就变得不伦不类了。
发表于dec 8, 2012 at 16:49
可惜，可怕并可悲的 ie6 ，全部失败……
发表于dec 9, 2012 at 12:01
发表于jan 10, 2013 at 12:10
/?page=home
推荐这个视差插件，个人觉得比上面介绍的几个来的都好
发表于jan 16, 2013 at 15:06
正想起部门老大之前说的一个效果~没想到这边就直接找到了~
感觉这玩意，得要点设计能力，不然玩不转吧？
发表于jan 18, 2013 at 11:31
有个问题早就想说的了, 为什么这个网站没有那个”回到顶部”的按钮啊 .. 建议加上~
发表于jan 21, 2013 at 17:17
好建议，这次改版的时候加上。
发表于mar 13, 2013 at 21:17
/parallaxscroller/
我自己模仿别人做了个简单的案例，原理是绑定scroll事件计算背景位移，可是会出现背景闪动现象，我看别人写的也去看他们的代码好像实现也是这样的，不明白为什么别人的动画很流畅而我背景位移时会闪动，首先问题肯定不是性能上的问题，有人提醒缓动处理，可是我发现没有添加缓动的入口，我之前也一直在想是哪里没加缓动了，可是没地方可以加，因为每次滚动都必须得立马把背景定位过去，否则就跟滚动条不同步了，如果有空帮我指点迷津下，谢谢了
发表于mar 14, 2013 at 20:24
问题已解决谢谢
发表于apr 8, 2013 at 19:42
额，忘记说下解决方案，这边补充下，之前我的做法都错了，主要问题在css上，因为那时候不知道background-attachment:这个东西，所以用上这家伙后scroll算法稍微修改下就可以了。
发表于apr 21, 2013 at 10:22
自己对视差原理进行了一些剖析，也有一些自己对这方面的理解，交流下心得/768
昵称 (必填)
email (必填) (不会被泄露)
微信上关注我们
请扫描上面的二维码或者在微信中搜索"iqianduan"添加好友
【校园招聘】腾讯isux招募前端开发实习生
关于z-index的那些事儿
别了，presto，opera新版本将采用webkit内核
扁平化设计美学
微信团队组招募前端重构师
html特殊字符大全
【招聘】腾讯无线招聘前端开发工程师
font api、web font与中文
移动端webapp开发必备知识
css技巧荟萃：了解css页面布局和加载流程
css的未来：一些试验性css属性
firebug net面板详解
haslayout综合
你需要知道的css3 动画技术
滚动视差网站工具与教程
一些必不可少的sublime text 2插件
108个漂亮而简约的免费图标
zen coding: 一种快速编写html/css代码的方法
css3 icon font完全指南
less/sass/stylus开发工具汇总
gaowhen高h温
hiro技术站
linode vps
smallni's blog
time machine
web 标准化交流会
web前端开发
whyidc 双线全能空间
中文最佳网站设计
前端博客导航
启良工作室
大猫の意淫网志
我爱互联网
米随随s5s5
腾讯alloyteam
软件开发网
飘飘的生活空间
entries rss
comments rss
wordpress.org
本文链接：
搜我们，能做什么？
&科技博客圈的百度
热门搜索：
& 如果你很懒GO
实时汇聚科技博客。
&你喜欢分类浏览GO
分类工厂：科技资讯自动分类，只关注你喜欢的
&你是发烧友GO
过滤中心：通过关键词过滤资讯。并邮件提醒。skrollr-视差滚动动画片插件 - Web前端当前位置:& &&&skrollr-视差滚动动画片插件skrollr-视差滚动动画片插件&&网友分享于：&&浏览：0次skrollr-视差滚动动画插件
skrollr ( /Prinzhorn/skrollr ) 是一个独立的js特效库。使用方法为在 dom元素上直接编写动画的开始、结束，这些“配置参数”最终会由js读取解析。使用的要点：1. 由于会对元素做CSS3的动画变形，实际的应用中，通常会把元素设置为 position: fixed；或者2. 这样就要求页面的每一个分块都有 height的 CSS控制，从而方便计算。3. 元素的定位支持paga和viewport两种，具体的参数设置，可以上官方github查看。
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&
&link href="fixed-positioning.css" rel="stylesheet" type="text/css" /&
&title&Anchors&/title&
&style type="text/css"&
body {font-family:sans-}
#content {
width:90%;
background:#
border:1px solid #444;
#content & div {
padding:6em 1
p {margin:1em 0;}
.float-left{
margin: 0 0 0 20
.float-right{
margin: 0 20px 0 0;
font-size: 2.5
padding: 80px 0 0 0;
text-align:
background:url(images/firstBG.jpg) 50% -75px no-
height: 600
padding: 160px 0 0 0;
background: url(images/secondBG.jpg) 50% 0 no-
height: 1300
padding: 0;
#second .bg{
background: url(images/trainers.png) 50% 0 no-
height: 1300
padding: 0;
width: 900
background: url(images/thirdBG.jpg) 50% 0 no-
height: 650
padding: 100px 0 0 0;
min-width: 980
width: 980
list-style:
z-index: 999;
margin: 0 0 15px 0;
#nav li a {
height: 10
border-radius: 10
background-color:
border: solid 2
#nav li a.current {
background-color:
/*.skrollable{position:absolute !}*/
.slide h2 {top:25%;}
.slide .desc {top:0%; width:600}
h1{color:}
#content h1{top:0%;left:30%;}
&!-- 控制页面滚动的时候，利用高度，自动高亮当前所在区块指示 --&
&ul id="nav"&
&li&&a href="#intro" title="Next Section" data-edge-strategy="reset" data-0="@class:current"
data-600="@class:"&&/a&&/li&
&li&&a href="#second" title="Next Section" data-edge-strategy="reset" data-600="@class:current"
data-1900="@class: "&&/a&&/li&
&li&&a href="#third" title="Next Section" data-edge-strategy="reset" data-1900="@class:current"
data-2500="@class: "&&/a&&/li&
&li&&a href="#content" title="Next Section" data-edge-strategy="reset" data-2500="@class:current"
data-end="@class: "&&/a&&/li&
&div id="skrollr-body"&
&div id="intro" class="slide"&
&div class="story"&
&div class="float-left"&
&h2 data-0="transform:scale(0) rotate(0deg);" data-300="transform:scale(1) rotate(1440deg);opacity:1;" data-400="opacity:0;"&(Almost) Static Background&/h2&
&p&This section has a background that moves slightly slower than the user scrolls. This is achieved by changing the top position of the background for every pixel the page is scrolled.&/p&
&/div& &!--.story--&
&/div& &!--#intro--&
&div id="second" class="slide"&
&div class="story"&&div class="bg"&&/div&
&div class="float-right" style="position:"&
&h2 data-800="left:0%;opacity:0" data-1100="left:40%;opacity:1" data-1200="opacity:0"&Multiple Backgrounds&/h2&
&div class="desc" data-600="right:0%;opacity:0" data-800="right:40%;opacity:1" data-1200="opacity:0"&
&p&The multiple backgrounds applied to this section are moved in a similar way to the first section -- every time the user scrolls down the page by a pixel, the positions of the backgrounds are changed.&/p&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.&/p&
&/div& &!--.story--&
&/div& &!--#second--&
&div id="third" class="slide"&
&div class="story"&
&div class="float-left"&
&h2 data-1800="transform:scale(0);opacity:1" data-2200="transform:scale(2);opacity:1"
data-2300="opacity:0;"&What Happens When JavaScript is Disabled?&/h2&
&p&The user gets a slap! Actually, all that jQuery does is moves the backgrounds relative to the position of the scrollbar. Without it, the backgrounds simply stay put and the user would never know they are missing out on the awesome! CSS2 does a good enough job to still make the effect look cool.&/p&
&/div& &!--.story--&
&/div& &!--#third--&
&div id="content"&
&h1 data-bottom-top="display:transform:scale(1)" data-top-top="display:transform:scale(2)"&Different anchor types&/h1&
&strong&Scroll down to see different anchors in action.&/strong&
&p&Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.&/p&
&p&Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.&/p&
&p&Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.&/p&
&p&Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.&/p&
&p&Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.&/p&
&p&Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.&/p&
&p&Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.&/p&
&p&Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.&/p&
&p&Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.&/p&
&p&Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.&/p&
&p&Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.&/p&
&p&Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.&/p&
&p&Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.&/p&
&p&Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.&/p&
&p&Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.&/p&
&p style="clear:"&Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.&/p&
&p&Biltonri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.&/p&
&script type="text/javascript" src="../dist/skrollr.min.js"&&/script&
&!-- 引入menu插件，从而可以通过锚点，正确定位元素的位置 --&
&script type="text/javascript" src="../dist/skrollr.menu.min.js"&&/script&
&script type="text/javascript"&
var s = skrollr.init({
//forceHeight: false
skrollr.menu.init(s,{
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有34个网页视差滚动插件和视差特效教程分享_兴艺创意
创意解决方案提供商|天津兴艺广告有限公司官网
我们每月推介三十位以上全球艺术家和创意、视觉工作者，你会惊叹他们的奇思妙想和精湛技艺，因为创意为你。
Cool Kitten
Scrolld.Js
FoldScroll
FullPage.Js
AnimateScroll
Parallax.Js
JInvertScroll
JQuery Full Content
9个视差滚动教程
1. 视差滚动教程
Behind The Scenes Of Nike Better World
2. 创建Silverback视差特效教程
How to recreate Silverback&s parallax effect
3. 利用视差滚动来讲述一个故事
做专题网页用不错呢。（Building a parallax scrolling storytelling framework）
4. 简单的JQuery视差滚动制作方法
Easy Parallax with
5. 单页面垂直视差滚动教程
One page website, vertical parallax
6. 利用JQuery实现视差滚动教程
Parallax Slider with jQuery
7. Nike Better视差效果制作教程
Recreating the Nike Better World Parallax Effect
8. 灯箱视差特效教程
Fluid 3 Slideshow with Parallax Effect
9. Jarallax视差插件教程
One Page Scroll
JQuery Parallax
Scroll Path
PageScroller Lite
Jquery-Parallax
Arbitrary-Anchor
Portfoliojs
Scrolling Parallax
Scrollocue
Scrollorama
Super Scrollorama
感谢您的阅读
微信扫描下方二维码，用手机访问我们的网站。能获得更好的阅读体验，还能立刻分享到朋友圈。来试试吧！
关注公众微信，与我们互动。使用Skrollr创建视差滚动效果页面 - CSDN博客
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。随着用户对视觉体验的要求不断提高，WEB开发者开始在网页中加入各种特效元素以满足用户的需求。今天这篇文章给大家推荐一个优秀的视差动画Javascript库——Skrollr.js
Skrollr是一个使用了HTML5和CSS3的轻量级JavaScript视差滚动类库。它是不依赖于其它框架的独立类库，可以让你快速打造出视差滚动效果。它可以让我们给任意元素设置关键帧的CSS属性，然后它会自动形成动画效果。更重要的一点是，使用此类库时不用写复杂的JS代码以及兼容主流浏览器，适配手机等移动终端等特性。
如何使用？
首先在页面&/body&前加入skrollr库，可以在下载到最新的库文件。然后使用skrollr.init()调用skrollr库。
&&&&&&type=&text/javascript&&src=&skrollr.min.js&&&&&&&type=&text/javascript&&&&&&&s&=&skrollr.init();&&&&&&&
接着，我们来演示下页面元素背景颜色变化效果。当用户向下滚动页面500像素时，div的背景色由#00f渐变为#f00。
&&data-0=&background-color:rgb(0,0,255);&&data-500=&background-color:rgb(255,0,0);&WOOOT&
请看演示：
注意，不能使用#00f或者#0000ff来定义背景颜色，应该使用rgb来定义颜色值，当然你不必担心低版本的ie浏览器不支持rgb，skrollr已经做了兼容性处理。
下面我们来看下转动效果，使用transform:rotate(0deg)可以让页面元素产生转动，下面的演示当滚动页面时div会做360度转动效果。
&&data-0=&background-color:rgb(0,0,255);transform:rotate(0deg);&&&data-500=&background-color:rgb(255,0,0);transform:rotate(360deg);&WOOOT&
请看演示：
skrollr库还提供了非线性动画调用及弹性缓冲效果，可以使用easings选项中的缓存函数如：bounce，swing等。
&&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&
请看演示：
接下来我们把“data-500”换成了“data-top”！skrollr不仅可以处理绝对位置，也可以处理相对位置！
&&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&
请看演示：
从上面几个例子中我们可以看出，使用元素的属性：data-xxx，添加多个这样的属性，skrollr居然可以自动创建动画过程。
在设置data-xxx时，skrollr提供了相对(relative)和绝对(absolute)视图两种方法，请看图解：
Skrollr提供了丰富的使用说明文档，以及javascript方法解说，详情可以阅读项目官网：，同时本站将会推出更丰富的Skrollr应用效果页面讲解文章，敬请期待！
声明：本文为原创文章，和作者拥有版权，如需转载，请注明来源于并保留原文链接，否则视为侵权。}