{"_id":"skrollr-stylesheets","_rev":"5-2de89461bcb34241545f8ecdc0a2f66a","name":"skrollr-stylesheets","description":"Parses skrollr compatible keyframe rules from stylesheets and applies them to elements as data attributes.","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"skrollr-stylesheets","title":"skrollr-stylesheets","description":"Parses skrollr compatible keyframe rules from stylesheets and applies them to elements as data attributes.","version":"1.0.0","homepage":"https://github.com/Prinzhorn/skrollr","author":{"name":"Alexander Prinzhorn","email":"alexander@prinzhorn.it","url":"http://www.prinzhorn.it/"},"repository":{"type":"git","url":"git://github.com/Prinzhorn/skrollr-stylesheets.git"},"bugs":{"url":"https://github.com/Prinzhorn/skrollr-stylesheets/issues"},"licenses":[{"type":"MIT","url":"https://github.com/Prinzhorn/skrollr-stylesheets/blob/master/LICENSE.txt"}],"main":"dist/skrollr.stylesheets.min.js","engines":{"node":">=0.8"},"scripts":{"test":"grunt travis --verbose"},"devDependencies":{"grunt-cli":"~0.1.7","grunt":"~0.4.1","grunt-contrib-uglify":"~0.2.0","grunt-contrib-jshint":"~0.3.0","grunt-contrib-qunit":"~0.2.0"},"keywords":[],"_id":"skrollr-stylesheets@1.0.0","dist":{"shasum":"879b0a0c133c87a71156db0f5698d41d32d0796c","tarball":"https://registry.npmjs.org/skrollr-stylesheets/-/skrollr-stylesheets-1.0.0.tgz","integrity":"sha512-dL55w/xGa0yKEhdYBV3AcomDQx95o/3JP+MEU+8SPKSHCKI/Ae24x/k9KqnbVB1FV3/1Z3E7hV+9esnCLcB+JQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk0DHLY0YTTx1+KPZ/gGuOo85/4DnHxr/iN/0jQTXDrwIgcd6s7Goy+H+5RNvz7+LU05dBgEx+tv1Sb6kJXIzlnNc="}]},"_from":".","_npmVersion":"1.3.24","_npmUser":{"name":"prinzhorn","email":"alexander@prinzhorn.it"},"maintainers":[{"name":"prinzhorn","email":"alexander@prinzhorn.it"}],"deprecated":"Development for skrollr and skrollr-stylesheets has been inactive since 09-2014"}},"readme":"skrollr-stylesheets 1.0.0\n=========================\n\nAllows separation of skrollr keyframes and the document by putting them inside your stylesheets, in **under 1kb** (minified + gzipped). Works in all browsers including IE8+.\n\nSee https://github.com/Prinzhorn/skrollr for infos on skrollr.\n\nDocumentation\n=====\n\nThis is a completely separate project. skrollr-stylesheets does not depend on skrollr in any way. It parses your stylesheets (`link` and `style` elements) and adds the information to the document as skrollr compatible data-attributes. After skrollr-stylesheets did it's job, you can use skrollr the way you're used to, just as if you had put the data-attributes on the elements manually.\n\nWhen I say \"parsing\" I mean it's using regular expressions. Thus you should avoid doing funky stuff inside your CSS files (actually, comments at the wrong place could break the current version). Just put all skrollr related things in one file and keep it clean.\n\nskrollr-stylesheets borrows it's syntax from CSS animations and uses it's own `-skrollr` prefix. Here's an example which should explain everything to get you started with skrollr-stylesheets.\n\nThis HTML\n\n```html\n<div id=\"foo\"></div>\n```\n\ntogether with this CSS (inside any `style` or `link`)\n\n```css\n#foo {\n\t-skrollr-animation-name:animation1;\n}\n\n@-skrollr-keyframes animation1 {\n\t0 {\n\t\tleft:100%;\n\t}\n\n\t2000 {\n\t\tleft:0%;\n\t}\n\n\t/*Same as*/\n\tskrollr-2000 {\n\t\tleft:0%;\n\t}\n\n\ttop {\n\t\tcolor:rgb(0,0,0);\n\t}\n\n\tbottom {\n\t\tcolor:rgb(255,0,0);\n\t}\n}\n```\n\nresults in this HTML\n\n```html\n<div id=\"foo\" data-0=\"left:100%;\" data-2000=\"left:0%;\" data-top=\"color:rgb(0,0,0);\" data-bottom=\"color:rgb(255,0,0);\"></div>\n```\n\nYou can use any CSS selector you want because we are using `document.querySelectorAll`. And you can even have multiple declarations affect the same element. The lower they appear inside the stylesheet(s), the higher their priority gets.\n\n\nThe script\n-----\n\nIn order to use skrollr-stylesheets, just place `dist/skrollr.stylesheets.min.js` at the bottom of your page before the closing `</body>` (but before skrollr itself). skrollr-stylesheets will execute right when it's included and searches for all stylesheets and processes them synchronously.\n\nskrollr-stylesheets doesn't expose or expect any globals (well, except for `window` and `document`, duh). You don't need to do anything but include the script.\n\n\nExternal stylesheets\n-----\n\nIf you want skrollr-stylesheets to parse an external stylesheet (those using a `link` element), add an empty `data-skrollr-stylesheet` attribute to it.\n\nskrollr-stylesheets ignores external (`<link>`) stylesheets unless they have the `data-skrollr-stylesheet` attribute. For example you wouldn't want the Bootstrap or jQuery UI stylesheet to be searched, since there are no keyframes anyway. Internal/embedded stylesheets (`<style>`) are always parsed (they're usually used only in dev anyway).\n\nExample\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" data-skrollr-stylesheet />\n```\n\n**Heads up:** Since external stylesheets are fetched using AJAX (more like SJACSS, but that's not the point here) the same origin policy applies which prohibits AJAX requests when viewing files using the `file://` protocol. Either fire up a local server (e.g. `npm install http-server -g && http-server` or `php -S localhost:8080`) or start Chrome using `google-chrome --disable-web-security`.\n\nAttributes\n----------\n\nApart from keyframes skrollr also uses attributes for other things, for examaple `data-anchor-target`. In order to set attributes from within your stylesheet, just do this:\n\n```css\n#foo {\n\t-skrollr-anchor-target: '#bar';\n}\n```\n\nwhich results in\n\n```html\n<div id=\"foo\" data-anchor-target=\"#bar\"></div>\n```\n\nSupported attributes are: `data-anchor-target`, `data-smooth-scrolling`, `data-emit-events`, and `data-menu-offset`.\n\n\nMedia queries\n-----\n\nYou **cannot** use media queries inside your stylesheets. Parsing those would add another level of complexity to the code. Further more this would not fit the current philosophy of skrollr-stylesheets, which is to parse and apply the keyframes once on page load and then do nothing. Media queries would need to be evaluated at each `resize` and `orientationchange`.\n\nBut wait! You **can** use the `media` attribute on external stylesheets. But bare in mind that they are only evaluated once at page load.\n\nExample\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"style-large.css\" media=\"only screen and (min-width: 1050px)\" data-skrollr-stylesheet />\n```\n\nThis feature relies on [window.matchMedia](https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia). There is a [matchMedia polyfill](https://github.com/paulirish/matchMedia.js) available that can be used with older browsers. Look at [http://caniuse.com/#search=matchmedia](http://caniuse.com/#search=matchmedia) for browser compatibility.\n\nSass\n-----\n\nThe above is already pretty awesome, but it gets even better. If you know skrollr, you probably heard about the _constants_ feature. Let's admit it: it does it's job, but it's ugly.\n\n[Sass](http://sass-lang.com/) to the rescue! Using Sass variables and interpolation, things can now look like this:\n\n```scss\n$about_section_begin: 0;\n$about_section_duration: 2000;\n$about_section_end: $about_section_begin + $about_section_duration;\n\n@-skrollr-keyframes animation1 {\n\tskrollr-#{$about_section_begin} {\n\t\tleft:100%;\n\t\topacity#{\"[swing]\"}: 0.0;\n\t}\n\n\tskrollr-#{$about_section_end} {\n\t\tleft:0%;\n\t\topacity: 1.0;\n\t}\n}\n```\n\n_\\*mind blown\\*_\n\nAnd of course you can use all the things you already love about Sass as well.\n\nNote that I used the `skrollr-` prefix in front of the numbers. That's because starting with Sass 3.4 identifiers starting with a number don't compile anymore (as they're invalid CSS).\n\nNote that easing functions need to be interpolated as strings in Sass because of the non-standard syntax.\n\n\nLimitations\n=====\n\nskrollr-stylesheets does not react to changes in the document. The stylesheets are parsed once and then applied. You can't add a class to an element and expect the keyframes to get updated.\n\nskrollr-stylesheets tries to mimic the way normal CSS works in terms of inheritance and order of precedence. Stylesheets which appear lower in the document will have higher precedence, and inline keyframes will have precedence over everything else. That means if you declare the same keyframe with same properties (probably different values) in multiple places, they overwrite each other, just as normal CSS does. **But skrollr-stylesheets is not able to detect which selector has a higher specificity. It only operates on element-level. Thus only the order of rules counts, not the specificity of the selector.**\n\nChangelog\n=====\n\n1.0.0 (2014-12-12)\n------------------\n\n* Allow keyframes to be prefixed with `skrollr-` to avoid SASS issues (#47).\n\n0.0.6 (2014-05-28)\n------------------\n\n* Added `data-menu-offset` to the list of attributes (#41).\n\n0.0.5 (2014-04-30)\n------------------\n\n* Attributes likes `data-anchor-target` can now be set as well (#10).\n\n0.0.4 (2013-05-27)\n------------------\n\n* Allow dashes in animation names just like in CSS animations (#18)\n\n0.0.3 (2013-05-15)\n------------------\n\n* Added support for `media` attribute on external stylesheets.\n\n0.0.2 (2013-04-12)\n------------------\n\n* Fixed several issues with IE.\n* **breaking**: The logic of `data-no-skrollr` has been inversed. The attribute has been removed. Instead add `data-skrollr-stylesheet` to explicitly parse this external stylesheet.\n\n0.0.1\n-----\n\n* Initial \"release\". Features a reasonable amount of tests to at least let people play with it.","maintainers":[{"name":"prinzhorn","email":"alexander@prinzhorn.it"}],"time":{"modified":"2022-06-26T20:37:06.949Z","created":"2015-02-03T19:16:19.266Z","1.0.0":"2015-02-03T19:16:19.266Z"},"homepage":"https://github.com/Prinzhorn/skrollr","keywords":[],"repository":{"type":"git","url":"git://github.com/Prinzhorn/skrollr-stylesheets.git"},"author":{"name":"Alexander Prinzhorn","email":"alexander@prinzhorn.it","url":"http://www.prinzhorn.it/"},"bugs":{"url":"https://github.com/Prinzhorn/skrollr-stylesheets/issues"},"readmeFilename":"README.md"}