视差滚动效果插件skrollr-scroll使用教程

来源：互联网发布：淘宝牌子耳钉店铺编辑：程序博客网时间：2024/05/17 07:21

原文地址：https://github.com/Prinzhorn/skrollr

请注意:

从2014年9月开始，skrollr就没有进行过频繁的开发了。 (可以从这里看到贡献图https://github.com/Prinzhorn/skrollr/graphs/contributors) 并且我也没有任何计划要对skrollr做重大修改，请在您要对新版本浏览器，尤其是手机浏览器，进行开发之前，考虑到这个因素。老实讲，手机端的支持很恼火，(因为手机浏览器很难)你永远不应该因为一些奇特的UI特效向UX妥协。

skrollr 0.6.30

这是个在手机端 (Android, iOS, etc.)和电脑端都独立的视差滚动JavaScript库，压缩后大小大约12K。

友好的设计，不需要任何JavaScript技巧，只需要简单的 CSS 和 HTML。

其实，skrollr 不单单“只”做了视差滚动。它是一个成熟的滚动动画库。事实上,你可以在完全不用视差滚动的情况下依旧使用它。但是我想让它听起来很酷，于是用了一些时髦用语①。顺便说一下, skrollr 利用了HTML5 和CSS3 ;-)

Resources

插件

官方

skrollr-menu - hash导航
skrollr-ie - IE < 9 的css
skrollr-stylesheets - css文件中的关键帧

第三方

skrollr-colors - 可以同时使用十六进制，rgb和hsl色值。
skrollr-decks - 全屏展示

野生的

在 wiki page 的网页上可以看到有一些使用了skrollr的网站，你可以添加到你自己的网页上。:) 如果你支持了skrollr，你可以大方的把你的网站列在这里。

文档

首先: 看一些例子并且读一下源码 ;-). 这会让你对这个框架怎么工作的以及这些例子怎么实现的有初步了解。

摘要

skrollr 允许你对任何依赖于水平滚动条的元素设置任何css动画特效。你只需要对每个相对于滚动起点的元素定义好关键帧。

其他库为了定义动画需要你写JavaScript代码，这带来了两个主要的问题：

动画和元素不在同一个地方。为了找到指定元素的动画，你需要查找很多（有时候上千）行JavaScript代码中。
你需要学习新的语法，这些语法多半又冗杂又限制多。

用skrollr, 你在关键帧归属的元素上使用的是你已经了解的语法（CSS）。

如果你更希望你的关键帧在另一个独立的文件中，可以参看skrollr-stylesheets.

如果你更喜欢用JavaScript来定义动画来确保看起来ScrollMagic. 它同时依赖jQuery和 Greensock Animation Platform (GSAP)，你可以完全控制你的动画的每一个细节。

正式开始

首先你要在文件底部引入 skrollr.min.js (在</body>标签关闭前) ，然后调用 skrollr.init(). 或者如果你喜欢你也可以把它放在 <head> 标签里，但是要保证调用 init() 的时候要在文档加载完成后 (比如 jQuery 的 ready 事件或者是原生的 window.onload).

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

如果你在你的工程中用了require.js 你也可以把skrollr当做一个module.

require(['skrollr'], function(skrollr){    var s = skrollr.init();});

如果你对CSS很熟悉, 你已经知道了 style 属性。为了创建一个动画你需要几个，最少两个 style属性。这就是skrollr 所做的.你用HTML5 data- attributes 来定义多个动画组(我们叫其中每一个为关键帧) skrollr在两个关键帧中插值.

当一个`div`从最高处滑动到500ox的时候，我们可以把它的background-color从 `#00f` 变到`#f00`

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

在浏览器中查看

Lessons learned

Skrollr保证了你可以滚动500 px甚至更多,即使没有足够的内容。你可以通过 forceHeight 选项阻止这种滚动.
你不能用#00f或者#0000ff. 你需要用 rgb 或者 hsl 并且明确定义你想要的色彩空间，因为他们会导致不同的动画(HSL 在多数情况下表现得更好). 不用担心, 对IE < 9 也做了准确的兼容，可以正确展示 rgb 和 hsl 。

现在来看一个滚动特效

<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>

在浏览器中查看

Lessons learned

Skrollr 解决了所有的繁琐的css前缀，尽管 -moz-放松然后来一杯-webkit-coffee吧。

现在让旋转像一个嘻哈视频一样跳起来吧

<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>

在浏览器中查看

Lessons learned

Skrollr 允许非线性的动画。你可以在内置函数中通过配置各个属性使用所谓的 easing function。有一个内置的easing function清单(在JavaScript 部分中可以看到)，你也可以通过用easings 选项使用你自己的function。

现在你可以已经注意到用500px来当做一个关键帧的位置是一种偶然行为，这取决于你浏览器的大小。

当最高的元素到了可视区域的最高点（元素离开可视区域）的时候，让我们来终止动画吧。

<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>

在浏览器中查看

Lessons learned

Skrollr的关键帧可以是 absolute 也可以是 relative.

这里是简短介绍的末尾了，以下的部分将会介绍更多的详细情况。

如果是你不是data-attributes 的粉丝或者你准备建一个更好结构更灵活的大型的站点，可以看一看 skrollr-stylesheets.

手机支持

skrollr 从 0.5.0 开始，正式支持包括Android和iOS在内的手机浏览器。并且，手机端支持从skrollr 0.6.0.开始重写。

手机上的问题以及解决方案

(如果你对细节不感兴趣的话，你可以滚动一小部分，直接看如果要做手机支持你需要做什么)

一些关于为什么这是一个重要的里程碑，为什么其他的失败了的话：

手机浏览器会尝试它能做的一切来省电。这就是为什么你在滚动的时候手机浏览器会延迟执行JavaScript。尤其是iOS在这方面做得更激进，完全停止了JavaScript.。简而言之，这就是很多滚动的库在手机上根本不起作用，或者他们有自己的滚动条，导致在电脑端的可用性也成了一场噩梦。这在我开发skrollr的时候是一个重要的要求，我不会强迫你按照我想要的方式来滚动。在桌面端skrollr 用了原生的滚动条，并且你可以按照你想要的方式来滚动网页 (键盘，鼠标等).

你只说在手机上这不管用，但是为什么不管用？答案很简单。当你在手机上使用skrollr的时候你歧视不是在滚动，当监测一个手机浏览器的时候，skrollr屏蔽了原生的滚动。并且用css转化代替了监听touch事件和移动内容（更准确的说是 #skrollr-body 元素）。

为了支持手机浏览器你需要做什么

从skrollr 0.6.0 开始，你所要做的就只有一件事：把你的页面包裹在id为skrollr-body 的元素下，我们移动这个元素来假装滚动。唯一一个情况你不需要用 #skrollr-body 的时候就是你用了position:fixed 。事实上， skrollr网站不包括#skrollr-body 元素.如果你又需要fixed的元素的又需要non-fixed的元素（比如static元素）把static元素放在 #skrollr-body 元素里.

Or to put it differently: On mobile the skrollr-body element is moved using CSS transforms. 依据CSS规范，你不能使用 position:fixed或者 background-attachment:fixed 在使用css 变换元素里面。(http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/). 这就是为什么这些元素需要放在skrollr-body外面。

skrollr-body 元素可以在init-options被配置。

AMD

从0.6.22 开始对AMD尝试着支持。请注意，现在只有 skrollr 核心才支持AMD . 我们在将来将会更新插件。

require(['skrollr'], function(skrollr){    skrollr.init();});

绝对 vs 相对定位模式

Being only able to define key frames in absolute values is simply insufficient for some cases. For example, if you don't know exactly where an element will be in the document. That's why there are two modes for key frames, namely absolute andrelative mode.

absolute mode (or document mode)

The key frames are defined as absolute values describing how much the document has been scrolled down.

The syntax is data-[offset]-[anchor], where offset can be any integer (0 is default) and anchor can be either start(default) or end. Either offset or anchor can be omitted in some situations. Here are some examples of key frames and their meaning.

data-0 = data-start = data-0-start: When the scroll top is 0.
data-100 = data-100-start: When the scroll top is 100.
data--100 = data--100-start: When the scroll top is -100 (sounds like nonsense, but keep in mind that interpolation will be relative to this point).
data-end = data-0-end: When offset is 0, but counting from the bottom of the document instead of from the top. In short: when you reach the bottom of the page.
data-100-end: 100px before we reach the bottom.
data--100-end: 100px after we reach the bottom (again, it's up to you whether you need it).

relative mode (or viewport mode)

Instead of defining key frames relative to the document (i.e. absolute), we are able to define them depending on the position of any element in relation to the viewport.

The syntax is data-[offset]-(viewport-anchor)-[element-anchor], where offset can again be any integer and defaults to 0. Both viewport-anchor (mandatory) and element-anchor (optional) can be one of top, center or bottom. If element-anchoris omitted, the value of viewport-anchor will be taken (just like with background-position). Here are some examples of key frames and their meaning.

data-top = data-0-top = data-top-top = data-0-top-top: When the element's top is aligned with the top of the viewport.
data-100-top = data-100-top-top: When the element's top is 100px above the top of the viewport.
data--100-top = data--100-top-top: When the element's top is 100px below the top of the viewport.
data-top-bottom= data-0-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).
data-center-center = data-0-center-center: When the element is at the center of the viewport.
data-bottom-center = data-0-bottom-center: When the element's center is at the bottom of the viewport, thus the upper half of the element is visible.

By default the keyframes are triggered by the position of the element where the keyframes are described. However there are times when the position of a second element should trigger the first element's keyframes. The data-anchor-target attribute can be used in these cases. The data-anchor-target attribute accepts any CSS selector and the position of the first element on the page matching the selector will be used to trigger keyframes on the element where the attribute is defined. data-anchor-target requires IE 8 or greater.

Examples: <divdata-anchor-target="#foo"> will have it's keyframes tiggered by the position of the #foo element. Any CSS selector can be used, i.e data-anchor-target=".bar:not(.bacon) ~ span > a[href]"

Note: If you need to support IE 7, then you may only use IDs as anchor-targets, i.e. #foo. The IE plugin maps querySelectorto getElementById.

Here's an infographic for better understanding of anchors (click to open PDF):

Anchors Guide

Important: All those values will be calculated up-front and transformed to absolute mode. So if either the element's box height changes (height, padding, border) or the elements position within the document, you probably need to call refresh()(see documentation in JavaScript section below). Window resizing is handled by skrollr.

Percentage offsets

All offsets shown above are given in absolute pixel values, e.g. data-300 for 300px from the top or data-13-top-bottom for a13px offset to the top-bottom anchor. As of skrollr 0.6.13 you can also have offsets as percentages of the viewport by appending a p to the number. For example data-75p for when you scrolled down 75% of the viewport or data-10p-centerto have a 10% offset from the center anchor.

Hash navigation

Check out the skrollr-menu plugin.

Working with constants

I was lying to you. The syntax for absolute mode is not data-[offset]-[anchor] and for relative mode it's not data-[offset]-(viewport-anchor)-[element-anchor]. In both cases, offset can be preceded by a constant which can be passed to the initmethod. The name of the constant needs to be preceded with an underscore.

Example:

skrollr.init({    constants: {        foobar: 1337    }});

<div data-_foobar="left:0%;" data-_foobar--100="left:50%;" data-_foobar-100="left:100%;"></div><!--Equal to--><div data-1337="left:0%;" data-1237="left:50%;" data-1437="left:100%;"></div>

Valid characters for a constant are [a-z0-9_].

Dynamic constants

Starting with skrollr 0.6.19 the word "constants" doesn't quite fit anymore, but who cares.

You can now use functions and percentages as constants. They are automatically evaluated when the window is resized or if you call refresh.

skrollr.init({    constants: {        foo: function() {            //Note: you can access the skrollr instance with `this` for things like `this.relativeToAbsolute`            return Math.random() * 100;//trolololol        },        vh: '100p'    }});

CSS classes

skrollr will add a skrollr class to the HTML element when calling init and will remove a no-skrollr class if present. Additionally, it will add a skrollr-desktop or skrollr-mobile class depending on which it detects. This allows fallback CSS rules to create a good user experience on unsupported devices or when JavaScript or skrollr are disabled.

All elements under skrollr's control (elements with appropriate data-attributes) will get the skrollable class. In addition, we add either the skrollable-before, skrollable-between or skrollable-after class, depending on whether the current scroll position is before, between or after the first/last (smallest/largest) keyframe of an element.

Animating attributes

Starting with skrollr 0.6.24 you can also animate attribute and not just style properties. This is especially a big thing because in the SVG world many properties are implemented as attributes and not in CSS. Animating an attribute couldn't be simplier, just prefix the property with an @ symbol!

<polygon    points='426,720   -200,720   -200,0   955,0'    data-0="@points:426,720   -200,720   -200,0   955,0"    data-500="@points:380,720   -200,720   -200,0   1302,0"></polygon>

Note: as always, skrollr doesn't do any magic. It doesn't understand what a polygon or points are. It's only interpolating numbers, that's it. So make sure you have the same number of numbers in your keyframes (8 in this case).

Filling missing values

Imagine the following animation

<div data-100="left:0%;" data-200="top:0%;" data-300="left:50%;" data-400="top:50%;"></div>

One could expect left to have a value of 25% at keyframe 200. That is not the case. By design, skrollr only interpolates values between key frames which are direct neighbors. What actually happens is that skrollr internally fills out all holes once from left and then from right. So the above is equivalent to

<div data-100="left:0%;top:0%;" data-200="left:0%;top:0%;" data-300="left:50%;top:0%;" data-400="left:50%;top:50%;"></div>

Preventing interpolation

The reason why skrollr is so lightweight and powerful is because it literally interpolates every number it can find. If you want to prevent some side effect, you can suppress interpolation for a specific value by prepending an exclamation point.

Example:

<!-- This will get your image url f***** up because there's no "kitten1.4561799.jpg" and the like --><div data-0="background-image:url(kitten1.jpg);" data-100="background-image:url(kitten2.jpg)"></div><!-- Better --><div data-0="background-image:!url(kitten1.jpg);" data-100="background-image:!url(kitten2.jpg)"></div>

Note: The values for both keyframes (if they contain a number) need to be prefixed if you want to avoid skrollr throwing an exception at you!

Limitations

There are some limitations of skrollr you should be aware of.

All numeric values have to have the same unit, even 0 needs a unit. It's not possible to animate from 5% to 100px. skrollr won't complain, but results are undefined.
Animations between values which are composed of multiple numeric values like margin:0 0 0 0; are only possible for the same number of values. margin:0px 0px 0px 0px; to margin:0px 100px 50px 3px; is fine, but not margin:10px; tomargin:5px 10px;.
Animations between CSS transforms only work when they use the same functions in same order. From rotate(0deg) scale(1) to rotate(1000deg) scale(5) is fine.
Color animations don't support named values like "red" or hex values like "#ff0000". Instead, you have to use rgb(),rgba(), hsl() and hsla(). Don't worry, there's a skrollr plugin for IE < 9 to support hsl() (without "a"!) and to fall rgba back to rgb.
Color animations only work for same color functions. hsl() to hsl() or hsla() is fine, but not rgb() to hsl(). Which makes sense, because animating from the same colors in rgb space and in hsl space results in different animations (hsl gives you the nice rainbow stuff).

But feel free to send in a pull request to fix any of them. Just keep in mind that keeping skrollr as lightweight as possible has high priority.

JavaScript

On the JavaScript part there's not much to do (you can, if you want to!). So if you only know CSS and HTML, perfect.

skrollr.init([options])

All there is to do is to call skrollr.init([options]); which returns an instance of the singleton skrollr class. Subsequent calls to init() will just return the same skrollr instance again.

Possible options for init() are

smoothScrolling=true

Smooth scrolling smoothens your animations. When you scroll down 50 pixels, the animations will transition instead of jumping to the new position.

The global setting can be overridden per element by setting data-smooth-scrolling to on or off.

smoothScrollingDuration=200

The number of milliseconds the animations run after the scroll position changed the last time.

constants={}

An object containing integers as values. The keys can contain [a-z0-9_]. They do not need a leading underscore.

Example: data-_myconst-200 and skrollr.init({constants: {myconst: 300}}) result in data-500.

scale=1

By default, skrollr uses the largest key frame and makes document height + viewport height this high, thus the max possible scroll top offset. If your animation runs too fast or too slow, just adjust the scale value.

scale only affects keyframes in absolute mode.

When forceHeight is set to false, scale is ignored.

scale affects constants as well.

scale does only affect key frames in absolute mode, e.g. data-500 but not data-top.

forceHeight=true

true: Make sure the document is high enough that all key frames fit inside. Example: You use data-1000, but the content only makes the document 500px high. skrollr will ensure that you can scroll down the whole 1000px. Or if you use relative mode, e.g. data-top-bottom, skrollr will make sure the bottom of the element can actually reach the top of the viewport.

false: Don't manipulate the document and just keep the natural scrollbar.

mobileCheck=function() {...}

This option allows you to pass a function to skrollr overwriting the check for mobile devices. The function should return truewhen mobile scrolling should be used and false if not.

The default looks like this

function() {    return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);}

mobileDeceleration=0.004

The amount of deceleration for momentum scrolling on mobile devices. This options tells skrollr how fast or slow you want the scrolling to stop after the user lifted his finger.

Set it to 1 to disable momentum scrolling.

skrollrBody='skrollr-body'

This option allows you to override the default id-selector used for supporting mobile browsers. It might come in handy when the element in question already has a assigned id or if you would like to define more then one skrollrBody depending on preceding JavaScript-logic.

edgeStrategy='set'

This option specifies how to handle animations when the scroll position is outside the range on the keyframes (i.e. before the first or after the last keyframe).

One of three options are possible

set (default): When before/after the first/last keyframe, apply the styles of the first/last keyframe to the element.
ease: Same as set, but the values will be transformed using the given easing function.
reset: When before/after the first/last keyframe, apply the styles which the element had before skrollr did anything. This means resetting the class attribute as well as removing all styles which have been applied to the style property. This means the element won't have any skrollable-* CSS classes.

Example:

Given the following element with two keyframes

<div data-1000="left:0%;top:0%;" data-2000="left:50%;top:100%;" style="left:-100%;" class="section"></div>

and the following easing function which always returns 0.5 (I know it's pointless, but it's just an example. A real world example would be an easing function that represents a curve and starts somewhere between 0 and 1, but not at 1)

function(p) {    return 0.5;}

and imagine the scrollbar is at 237, which is below the first keyframe which is at 1000.

set will result in <div style="left:0%;top:0%;" class="section skrollable skrollable-before"></div> which is plaindata-1000.
ease will result in <div style="left:25%;top:50%;" class="section skrollable skrollable-before"></div> which is 0.5 * data-1000.
reset will result in <div style="left:-100%;" class="section"></div> which is what the element originally had. Note how top is missing.

beforerender

A listener function that gets called each time right before we render everything. The function will be passed an object with the following properties:

{    curTop: 10, //the current scroll top offset    lastTop: 0, //the top value of last time    maxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.    direction: 'down' //either up or down}

Returning false will prevent rendering.

render

A listener function that gets called right after we finished rendering everything. The function will be passed with the same parameters as beforerender.

Example

skrollr.init({    render: function(data) {        //Log the current scroll position.        console.log(data.curTop);    }});

keyframe

Experimental

In order to receive keyframe events from an element, add the data-emit-events attribute to the element. The keyframe function will be called with three arguments

The element that passed the keyframe.
The name of the keyframe, camel-cased (see example).
The direction the user is scrolling.

Example:

<div    data-500="..."    data-top-bottom="..."    data-_offset-center="..."    data-emit-events>    Some content</div>

skrollr.init({    keyframe: function(element, name, direction) {        //name will be one of data500, dataTopBottom, data_offsetCenter    }});

Note: this is experimental, expect the API to change! Originally I wanted to emit the events right on the element, so you could do this

//Wouldn't this be nice?document.querySelector('#foo').addEventListener('skrollr.dataTopBottom.up', function() {    //#foo just passed the data-top-bottom keyframe while scrolling up}, false)

but IE.

easing

An object defining new easing functions or overwriting existing ones. Easing functions get just one argument, which is a value between 0 and 1 (the percentage of how much of the animation is done). The function should return a value between 0 and 1 as well, but for some easings a value less than 0 or greater than 1 is just fine.

An easing function basically transforms the timeline for an animation. When the animation should be 50% done, you can transform it to be 90% done or whatever your function does.

Example:

skrollr.init({    easing: {        //This easing will sure drive you crazy        wtf: Math.random,        inverted: function(p) {            return 1 - p;        }    }});

You can now use the easing functions like any other.

skrollr ships with some built in functions:

linear: The default. Doesn't need to be specified.
quadratic: To the power of two. So 50% looks like 25%.
cubic: To the power of three. So 50% looks like 12.5%
begin/end: They always return 0 or 1 respectively. No animation.
swing: Slow at the beginning and accelerates at the end. So 25% -> 14.6%, 50% -> 50%, 75% -> 85.3%
sqrt: Square root. Starts fast, slows down at the end.
outCubic
bounce: Bounces like a ball. See https://www.desmos.com/calculator/tbr20s8vd2 for a graphical representation.

Custom easing

Use this generator
Insert the given polynomial coeficients instead of t, t2, t3, t4 and t5

t5*(p*p*p*p*p) + t4*(p*p*p*p) + t3*(p*p*p) + t2*(p*p) + t*p

Example shown with the values for easeOutElasticBig

easeOutElasticBig: function(p) {  return 56*(p*p*p*p*p) - 175*(p*p*p*p) + 200*(p*p*p) - 100*(p*p) + 20*p;}

skrollr.get()

Returns the skrollr instance if init() has been called before or undefined.

Public API

Calling init() returns an instance of skrollr which exposes a public api.

refresh([elements])

Reparses all given elements. You can pass a single element or an array-like element (Array, NodeList or jQuery object)

Useful when

Elements in relative mode change and need to be updated.
Data-attributes are manipulated dynamically.
New elements are added to the DOM and should be controlled by skrollr.

When no elements are given, all elements in the document will be parsed again. In fact, when calling skrollr.init() skrollr uses refresh() without parameters internally.

Time consuming operations, should not be called on every rendering.

relativeToAbsolute(element, viewportAnchor, elementAnchor)

Returns an integer which represents the absolute scroll position which correlates to the relative anchor.

element must be a DOM element.

viewportAnchor and elementAnchor must be one of top, center or bottom

Example:

var offset = s.relativeToAbsolute(document.getElementById('foo'), 'top', 'bottom');//offset contains the scroll position at which #foo's bottom is at the top of the viewport.//If you now use setScrollTop(offset) or animateTo(offset) #foo's bottom will be perfectly aligned with the top of the viewport. Yay.

getScrollTop()

Returns the current scroll offset in pixels. Normalizes different browser quirks and handles mobile scrolling.

getMaxScrollTop()

Returns the number of pixels that can be scrolled down in total. If forceHeight is true, that's usually the largest keyframe. Otherwise it's the height of the document minus the viewport height.

setScrollTop(top[, force = false])

Sets the top offset using window.scrollTo(0, top) on desktop or updating the internal state in case of mobile scrolling.

When force is set to true, skrollr will jump to the new position without any kind of transition. By default, the globalsmoothScrolling setting applies.

isMobile()

Returns if skrollr runs in mobile mode (see also mobileCheck option).

animateTo(top[, options])

Animates the scroll position from current position to top. Possible options are

duration

How long the animation should run in milliseconds. The default is 1000 or one second.

easing

The name of an easing function. The same functions can be used as for property animations. Default is linear .

done

A function to be called after the animation finished. When you pass a top value, which is the same as the current, then the function will be called immediately. The function gets a boolean argument interrupted which indicates if the animation was interrupted by stopAnimateTo or finished to the end.

stopAnimateTo()

Stops the animation and calls the done callback passing true as interrupted arguments.

isAnimatingTo()

Returns if an animation caused by animateTo is running.

on(name, fn)

Set a listener function for one of the events described in the options section (beforerender, render, keyframe). Only one listener can be attached at a given time. This method overwrites the current listener, if any.

off(name)

Removes the listener for the given event.

destroy()

Destroys skrollr. All class and style attributes will be set to the values they had before.

Changelog

See HISTORY.md.

①译者注：指插件名字skrollr-scroll

1 0

视差滚动效果插件skrollr-scroll使用教程

原文地址：https://github.com/Prinzhorn/skrollr

请注意:

skrollr 0.6.30

Resources

插件

官方

第三方

野生的

更多资源(教程等)

文档

摘要

正式开始

当一个div从最高处滑动到500ox的时候，我们可以把它的background-color从 #00f 变到#f00

Lessons learned

现在来看一个滚动特效

Lessons learned

现在让旋转像一个嘻哈视频一样跳起来吧

Lessons learned

当最高的元素到了可视区域的最高点（元素离开可视区域）的时候，让我们来终止动画吧。

Lessons learned

手机支持

手机上的问题以及解决方案

为了支持手机浏览器你需要做什么

AMD

绝对 vs 相对 定位模式

absolute mode (or document mode)

relative mode (or viewport mode)

Percentage offsets

Hash navigation

Working with constants

Dynamic constants

CSS classes

Animating attributes

Filling missing values

Preventing interpolation

Limitations

JavaScript

skrollr.init([options])

smoothScrolling=true

smoothScrollingDuration=200

constants={}

scale=1

forceHeight=true

mobileCheck=function() {...}

mobileDeceleration=0.004

skrollrBody='skrollr-body'

edgeStrategy='set'

beforerender

render

keyframe

easing

skrollr.get()

Public API

refresh([elements])

relativeToAbsolute(element, viewportAnchor, elementAnchor)

getScrollTop()

getMaxScrollTop()

setScrollTop(top[, force = false])

isMobile()

animateTo(top[, options])

duration

easing

done

stopAnimateTo()

isAnimatingTo()

on(name, fn)

off(name)

destroy()

Changelog

当一个`div`从最高处滑动到500ox的时候，我们可以把它的background-color从 `#00f` 变到`#f00`

绝对 vs 相对定位模式