` 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]\"`\n\n**Note**: If you need to support IE 7, then you may only use IDs as `anchor-target`s, i.e. `#foo`. The IE plugin maps `querySelector` to `getElementById`.\n\nHere's an infographic for better understanding of anchors (click to open PDF):\n\n[](https://raw.github.com/Prinzhorn/skrollr/master/guide/anchor-position-guide.pdf)\n\n**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.**\n\n\nPercentage offsets\n------------------\n\nAll offsets shown above are given in absolute pixel values, e.g. `data-300` for `300px` from the top or `data-13-top-bottom` for a `13px` 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-center` to have a `10%` offset from the `center` anchor.\n\n\nHash navigation\n-----\n\nCheck out the [skrollr-menu](https://github.com/Prinzhorn/skrollr-menu) plugin.\n\nWorking with constants\n-----\n\nI 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 `init` method. The name of the constant needs to be preceded with an underscore.\n\nExample:\n\n```js\nskrollr.init({\n\tconstants: {\n\t\tfoobar: 1337\n\t}\n});\n```\n\n```html\n
\n\n\n\n
\n```\n\nValid characters for a constant are `[a-z0-9_]`.\n\nDynamic constants\n-----------------\n\nStarting with skrollr `0.6.19` the word \"constants\" doesn't quite fit anymore, but who cares.\n\nYou can now use functions and percentages as constants. They are automatically evaluated when the window is resized or if you call `refresh`.\n\n```js\nskrollr.init({\n\tconstants: {\n\t\tfoo: function() {\n\t\t\t//Note: you can access the skrollr instance with `this` for things like `this.relativeToAbsolute`\n\t\t\treturn Math.random() * 100;//trolololol\n\t\t},\n\t\tvh: '100p'\n\t}\n});\n```\n\nCSS classes\n-----\n\nskrollr 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.\n\nAll 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.\n\nAnimating attributes\n--------------------\n\nStarting 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!\n\n```html\n
\n\n```\n\nNote: 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).\n\nFilling missing values\n-----\n\nImagine the following animation\n\n```html\n\n```\n\nOne 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\n\n```html\n\n```\n\nPreventing interpolation\n-----\n\nThe 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.\n\nExample:\n```html\n\n\n\n\n\n```\n\n**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!\n\nLimitations\n-----\n\nThere are some limitations of skrollr you should be aware of.\n\n* 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.\n* 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;` to `margin:5px 10px;`.\n* 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.\n* 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.\n* 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).\n\nBut 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.\n\nJavaScript\n====\n\nOn the JavaScript part there's not much to do (you can, if you want to!). So if you only know CSS and HTML, perfect.\n\nskrollr.init([options])\n-----\n\nAll 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.\n\nPossible options for `init()` are\n\n### smoothScrolling=true\n\nSmooth scrolling smoothens your animations. When you scroll down 50 pixels, the animations will transition instead of jumping to the new position.\n\nThe global setting can be overridden per element by setting `data-smooth-scrolling` to `on` or `off`.\n\n### smoothScrollingDuration=200\n\nThe number of milliseconds the animations run after the scroll position changed the last time.\n\n### constants={}\n\nAn object containing integers as values. The keys can contain `[a-z0-9_]`. They *do not* need a leading underscore.\n\nExample: `data-_myconst-200` and `skrollr.init({constants: {myconst: 300}})` result in `data-500`.\n\n### scale=1\n\nBy 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.\n\n`scale` only affects keyframes in absolute mode.\n\nWhen `forceHeight` is set to false, `scale` is ignored.\n\n`scale` affects `constants` as well.\n\n`scale` does only affect key frames in absolute mode, e.g. `data-500` but not `data-top`.\n\n###forceHeight=true\n\n`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.\n\n`false`: Don't manipulate the document and just keep the natural scrollbar.\n\n###mobileCheck=function() {...}\n\nThis option allows you to pass a function to skrollr overwriting the check for mobile devices. The function should return `true` when mobile scrolling should be used and `false` if not.\n\nThe default looks like this\n\n```js\nfunction() {\n\treturn (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);\n}\n```\n\n### mobileDeceleration=0.004\n\nThe 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.\n\nSet it to `1` to disable momentum scrolling.\n\n### skrollrBody='skrollr-body'\n\nThis 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.\n\n### edgeStrategy='set'\n\nThis 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).\n\nOne of three options are possible\n\n* `set` _(default)_: When before/after the first/last keyframe, apply the styles of the first/last keyframe to the element.\n* `ease`: Same as set, but the values will be transformed using the given easing function.\n* `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.\n\nExample:\n\nGiven the following element with two keyframes\n\n```html\n\n```\n\nand 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`)\n\n```js\nfunction(p) {\n\treturn 0.5;\n}\n```\n\nand imagine the scrollbar is at `237`, which is below the first keyframe which is at `1000`.\n\n* `set` will result in `` which is plain `data-1000`.\n* `ease` will result in `` which is `0.5 * data-1000`.\n* `reset` will result in `` which is what the element originally had. Note how `top` is missing.\n\n\n### beforerender\n\nA listener function that gets called each time right before we render everything. The function will be passed an object with the following properties:\n\n```js\n{\n\tcurTop: 10, //the current scroll top offset\n\tlastTop: 0, //the top value of last time\n\tmaxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.\n\tdirection: 'down' //either up or down\n}\n```\n\nReturning `false` will prevent rendering.\n\n### render\n\nA listener function that gets called right after we finished rendering everything. The function will be passed with the same parameters as `beforerender`.\n\nExample\n\n```js\nskrollr.init({\n\trender: function(data) {\n\t\t//Log the current scroll position.\n\t\tconsole.log(data.curTop);\n\t}\n});\n```\n\n### keyframe\n\n**Experimental**\n\nIn 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\n\n1. The `element` that passed the keyframe.\n2. The `name` of the keyframe, camel-cased (see example).\n3. The `direction` the user is scrolling.\n\nExample:\n\n```html\n\n\tSome content\n