[
{
"path": ".gitignore",
"content": ".DS_Store\n\nrellax-build.js\n\n\nnpm-debug.log\ndebug.log\n\n# Latest bootstrap version\nbootstrap.min_v4.css\n\n# demo file with new bootstrap file\ndemo1.html"
},
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2016 Dixon & Moe\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# RELLAX\n\n[](https://www.npmjs.org/package/rellax)\n[](https://bundlephobia.com/result?p=rellax)\n[](https://bundlephobia.com/result?p=rellax)\n\nRellax is a buttery smooth, super lightweight, vanilla javascript parallax library. **Update:** Rellax now works on mobile (v1.0.0).\n\n* [Demo Website](https://dixonandmoe.com/rellax/)\n\n\n## Getting Started\n### Using npm\n\n`npm install rellax --save`\n\n### Using yarn\n\n`yarn add rellax`\n\n### CDN\n\n``\n\n### Download Locally\n\nif you're old school like us download and insert `rellax.min.js` in your html\n\n\n```html\n
\n I’m that default chill speed of \"-2\"\n
\n
\n I’m super fast!!\n
\n
\n I’m extra slow and smooth\n
\n\n\n\n```\n```html\n\n```\n## Features\n\n### Speed\nUse the `data-rellax-speed` attribute to set the speed of a `.rellax` element to something other than the default value (which is `-2`). A negative value will make it move slower than regular scrolling, and a positive value will make it move faster. We recommend keeping the speed between `-10` and `10`.\n\n#### Responsive Speed\nUse responsive speed attributes for breakpoint levels that require a different speed. Defaults to the `data-rellax-speed` setting in unspecified breakpoints.\n```html\n
\n I parallax at all different speeds depending on your screen width.\n
\n```\n\nPass an array of breakpoints. Each breakpoint value represents the resolution for mobile, tablet, desktop respectively. Checkout the responsiveness of the [`demo`](https://dixonandmoe.com/rellax/)\n```html\n\n```\n\n\n### Centering\nAfter some fantastic work from [@p-realinho](https://github.com/p-realinho), we just released the ability to center parallax elements in your viewport! We'll be building a nice demo website, but for now check out the tests folder for several examples of how it works.\n\nThere's two ways to implement centering, either on specific elements or as a global option.\n1. #### Element-wise Centering\n- Add the ```data-rellax-percentage=\"0.5\"``` to a specific html element\n```html\n
\n I’m that default chill speed of \"-2\" and \"centered\"\n
\n
\n I’m super fast!! And super centered!!\n
\n
\n I’m extra slow and smooth, and hella centered.\n
\n```\n2. #### Global Centering\n- To activate the center feature in your whole html, add the code your `\n```\n\n### Z-index\nIf you want to sort your elements properly in the Z space, you can use the data-rellax-zindex property\n```html\n
\n I’m that default chill speed of \"-2\" and default z-index of 0\n
\n
\n I’m super fast!! And on top of the previous element, I'm z-index 5!!\n
\n```\n\n### Horizontal Parallax\nHorizontal parallax is disabled by default. You can enable it by passing `horizontal: true` in the settings block.\nThis feature is intended for panoramic style websites, where users scroll horizontally instead of vertically.\nNote that this can work together at the same time with the default vertical parallax. If you do not want this, pass `vertical: false` in the settings block.\n```html\n\n```\n\n### Custom Wrapper\nBy default, the position of parallax elements is determined via the scroll position of the body. Passing in the `wrapper` property will tell Rellax to watch that element instead.\n```html\n\n```\n\n### Refresh\n```html\n\n```\n\n### Destroy\n```html\n\n```\n\n### Callback\n```html\n\n```\n\n### Target node\nInstead of using a className you can use a node, handy when using React and you want to use `refs` instead of `className`.\n```jsx\n
{ this.rellaxRef = ref }}>\n I’m that default chill speed of \"-2\"\n
\n\nvar rellax = new Rellax(this.rellaxRef)\n```\n\n## In the Wild\nIf you're using Rellax in production, we'd love to list you here! Let us know: moe@dixonandmoe.com\n- [Bowmore Scotch](https://www.bowmore.com/)\n- [Generated Photos](https://generated.photos/)\n- [How Much Does a Website Cost](https://designagency.io/)\n- [Linux Man Pages](https://dashdash.io/)\n- [Laws of UX](https://lawsofux.com/)\n- [Finch](https://finch.io/)\n- [Embedded Payroll](https://robotist.com/embedded-payroll-api)\n- [Product Designer in San Francisco](https://moeamaya.com/)\n- [EthWorks](http://ethworks.io/)\n- [Lorem Ipsum Generator](https://loremipsumgenerator.com/)\n- [Deeson](https://www.deeson.co.uk/)\n\n## Development\nIn the spirit of lightweight javascript, the build processes (thus far) is lightweight also.\n\n1. Open demo.html\n2. Make code changes and refresh browser\n3. Once feature is finished or bug fixed, use [jshint](http://jshint.com/) to lint code\n4. Fix lint issues then use [Google Closure Compiler](https://closure-compiler.appspot.com/home) to minify\n5. 🍻\n\n## Changelog\n- 1.7.1: Remove animation on destory [PR](https://github.com/dixonandmoe/rellax/pull/132)\n- 1.7.0: Scroll position set relative to the wrapper [PR](https://github.com/dixonandmoe/rellax/pull/125)\n"
},
{
"path": "absolute.html",
"content": "\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n \n \n \n \n\n\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n \n \n \n \n\n\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n \n \n \n \n\n
\n
\n
\n
\n
SERIOUSLY, WHY?!
\n
\n Come on, how boring is the internet without excessive javascript? We\n made this library since too many github repos are abandoned (RIP\n skrollr) or feature creepy. You got some beef or caught us slippin\n on unit tests, send rants and 10mb gifs to\n moe@dixonandmoe.com\n
\n
\n
\n\n
\n
\n
BUT ACTUALLY
\n
\n We've benefitted so much from open source projects that we're\n actively trying to give back. As designers, we're starting by\n releasing our own quirky js code.\n
\n \n <div class=\"rellax\" data-rellax-speed=\"-3\"> \n I’m slow and smooth \n </div>\n \n \n <div class=\"rellax\" data-rellax-speed=\"7\"> \n I’m super fast!! \n </div>\n \n \n <div class=\"rellax\" data-rellax-speed=\"-5\"> \n I’m extra slow and smooth \n </div>\n \n \n
\n\n
\n\n\n
\n \n\n \n \n
\n\n \n
Speed
\n
\n Use the data-rellax-speed attribute to set the speed of a\n .rellax element to something other than the default value\n (which is -2). A negative value will make it move slower\n than regular scrolling, and a positive value will make it move faster.\n We recommend keeping the speed between -10 and +10.\n
\n\n\n\n
\n \n
Responsive Speed
\n
\n Use responsive speed attributes for breakpoint levels that require a\n different speed. Defaults to the data-rellax-speed setting\n in unspecified breakpoints.\n
\n\n
\n \n <div\n class=\"rellax\"\n data-rellax-speed=\"7\"\n data-rellax-xs-speed=\"-5\"\n data-rellax-mobile-speed=\"3\"\n data-rellax-tablet-speed=\"-8\"\n data-rellax-desktop-speed=\"1\"> \n I parallax at all different speeds depending on your screen width. \n </div>\n \n
\n\n
\n Pass an array of breakpoints. Each breakpoint value represents the\n resolution for mobile, tablet, desktop respectively. Checkout the\n responsiveness of the demo.\n
\n After some fantastic work from @p-realinho, we\n just released the ability to center parallax elements in your viewport!\n We'll be building a nice demo website, but for now check out the tests\n folder for several examples of how it works via our tests folder on\n GitHub.\n
\n \n
\n There's two ways to implement centering, either on specific elements or as a global option.\n
\n\n
\n \n <div class=\"rellax\" data-rellax-percentage=\"0.5\"> \n I’m that default chill speed of \"-2\" and \"centered\" \n </div>\n \n \n <div class=\"rellax\" data-rellax-speed=\"7\"\n data-rellax-percentage=\"0.5\"> \n I’m super fast!! And super centered!! \n </div>\n \n \n <div class=\"rellax\" data-rellax-speed=\"-4\"\n data-rellax-percentage=\"0.5\"> \n I’m extra slow and smooth, and hella centered. \n </div>\n \n \n
\n If you want to sort your elements properly in the Z space,\n you can use the data-rellax-zindex property.\n
\n \n\n
\n \n <div class=\"rellax\"> \n I’m that default chill speed of \"-2\" and default z-index of 0 \n </div>\n \n \n <div class=\"rellax\" data-rellax-speed=\"7\"\n data-rellax-zindex=\"5\"> \n I’m super fast!! And on top of the previous element, I'm z-index 5!! \n </div>\n \n \n
\n
\n \n\n \n \n
\n \n
Horizontal Parallax
\n
\n Horizontal parallax is disabled by default. You can enable it by passing\n horizontal: true in the settings\n block. This feature is intended for panoramic style websites, where users\n scroll horizontally instead of vertically. Note that this can work together\n at the same time with the default vertical parallax. If you do not want this,\n pass vertical: false.\n
\n By default, the position of parallax elements is determined via the scroll\n position of the body. Passing in the wrapper\n property in the settings block will tell Rellax to watch that element instead.\n
\n \n\n
\n \n <script>\n //Set wrapper to .custom-element instead of the body\n var rellax = newRellax('.rellax',\n \n { \n wrapper:'.custom-element'\n });\n \n </script>\n \n
\n
\n \n\n \n \n
\n \n\n
Target Node
\n
\n Instead of using a className you can use a node, handy when using\n React and you want to use refs\n instead of className\n
\n \n <script>\n var rellax = newRellax(this.rellaxRef);\n \n </script>\n \n
\n
\n
\n \n\n \n \n
\n \n\n
Refresh
\n\n
\n \n <script>\n // Start Rellax\n var rellax = newRellax('.rellax');\n \n // Destroy and create again parallax with previous settings\n rellax.refresh();\n \n </script>\n \n
\n
\n \n\n \n \n
\n \n
Destroy
\n
\n \n <script>\n // Start Rellax\n var rellax = newRellax('.rellax');\n \n // End Rellax and reset parallax elements to their original positions\n rellax.refresh();\n \n </script>\n \n
\n \n\n \n\n\n \n \n \n \n\n\n\n\n\n"
},
{
"path": "option.js",
"content": "// ============================================================\n// To activate the active class on the links\n// ============================================================\n// Get the options menu element\nvar optnCard = document.getElementById(\"optnCard\");\n\n// Get all links with class=\"option\" inside the menu\nvar optns = optnCard.getElementsByClassName(\"option\");\n\n// Loop through the links and add the active class to the current/clicked link\nfor (var i = 0; i < optns.length; i++) {\n optns[i].addEventListener(\"click\", function() {\n var current = document.getElementsByClassName(\"active\");\n current[0].className = current[0].className.replace(\" active\", \"\");\n this.className += \" active\";\n });\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"rellax\",\n \"version\": \"1.12.1\",\n \"description\": \"Lightweight, vanilla javascript parallax library\",\n \"main\": \"rellax.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/dixonandmoe/rellax.git\"\n },\n \"keywords\": [\n \"parallax\"\n ],\n \"author\": \"Moe Amaya (https://dixonandmoe.com)\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/dixonandmoe/rellax/issues\"\n },\n \"homepage\": \"https://dixonandmoe.com/rellax/\"\n}\n"
},
{
"path": "rellax.js",
"content": "\n// ------------------------------------------\n// Rellax.js\n// Buttery smooth parallax library\n// Copyright (c) 2016 Moe Amaya (@moeamaya)\n// MIT license\n//\n// Thanks to Paraxify.js and Jaime Cabllero\n// for parallax concepts\n// ------------------------------------------\n\n(function (root, factory) {\n if (typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define([], factory);\n } else if (typeof module === 'object' && module.exports) {\n // Node. Does not work with strict CommonJS, but\n // only CommonJS-like environments that support module.exports,\n // like Node.\n module.exports = factory();\n } else {\n // Browser globals (root is window)\n root.Rellax = factory();\n }\n}(typeof window !== \"undefined\" ? window : global, function () {\n var Rellax = function(el, options){\n \"use strict\";\n\n var self = Object.create(Rellax.prototype);\n\n var posY = 0;\n var screenY = 0;\n var posX = 0;\n var screenX = 0;\n var blocks = [];\n var pause = true;\n\n // check what requestAnimationFrame to use, and if\n // it's not supported, use the onscroll event\n var loop = window.requestAnimationFrame ||\n window.webkitRequestAnimationFrame ||\n window.mozRequestAnimationFrame ||\n window.msRequestAnimationFrame ||\n window.oRequestAnimationFrame ||\n function(callback){ return setTimeout(callback, 1000 / 60); };\n\n // store the id for later use\n var loopId = null;\n\n // Test via a getter in the options object to see if the passive property is accessed\n var supportsPassive = false;\n try {\n var opts = Object.defineProperty({}, 'passive', {\n get: function() {\n supportsPassive = true;\n }\n });\n window.addEventListener(\"testPassive\", null, opts);\n window.removeEventListener(\"testPassive\", null, opts);\n } catch (e) {}\n\n // check what cancelAnimation method to use\n var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout;\n\n // check which transform property to use\n var transformProp = window.transformProp || (function(){\n var testEl = document.createElement('div');\n if (testEl.style.transform === null) {\n var vendors = ['Webkit', 'Moz', 'ms'];\n for (var vendor in vendors) {\n if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {\n return vendors[vendor] + 'Transform';\n }\n }\n }\n return 'transform';\n })();\n\n // Default Settings\n self.options = {\n speed: -2,\n\t verticalSpeed: null,\n\t horizontalSpeed: null,\n breakpoints: [576, 768, 1201],\n center: false,\n wrapper: null,\n relativeToWrapper: false,\n round: true,\n vertical: true,\n horizontal: false,\n verticalScrollAxis: \"y\",\n horizontalScrollAxis: \"x\",\n callback: function() {},\n };\n\n // User defined options (might have more in the future)\n if (options){\n Object.keys(options).forEach(function(key){\n self.options[key] = options[key];\n });\n }\n\n function validateCustomBreakpoints () {\n if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) {\n var isAscending = true;\n var isNumerical = true;\n var lastVal;\n self.options.breakpoints.forEach(function (i) {\n if (typeof i !== 'number') isNumerical = false;\n if (lastVal !== null) {\n if (i < lastVal) isAscending = false;\n }\n lastVal = i;\n });\n if (isAscending && isNumerical) return;\n }\n // revert defaults if set incorrectly\n self.options.breakpoints = [576, 768, 1201];\n console.warn(\"Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted\");\n }\n\n if (options && options.breakpoints) {\n validateCustomBreakpoints();\n }\n\n // By default, rellax class\n if (!el) {\n el = '.rellax';\n }\n\n // check if el is a className or a node\n var elements = typeof el === 'string' ? document.querySelectorAll(el) : [el];\n\n // Now query selector\n if (elements.length > 0) {\n self.elems = elements;\n }\n\n // The elements don't exist\n else {\n console.warn(\"Rellax: The elements you're trying to select don't exist.\");\n return;\n }\n\n // Has a wrapper and it exists\n if (self.options.wrapper) {\n if (!self.options.wrapper.nodeType) {\n var wrapper = document.querySelector(self.options.wrapper);\n\n if (wrapper) {\n self.options.wrapper = wrapper;\n } else {\n console.warn(\"Rellax: The wrapper you're trying to use doesn't exist.\");\n return;\n }\n }\n }\n\n // set a placeholder for the current breakpoint\n var currentBreakpoint;\n\n // helper to determine current breakpoint\n var getCurrentBreakpoint = function (w) {\n var bp = self.options.breakpoints;\n if (w < bp[0]) return 'xs';\n if (w >= bp[0] && w < bp[1]) return 'sm';\n if (w >= bp[1] && w < bp[2]) return 'md';\n return 'lg';\n };\n\n // Get and cache initial position of all elements\n var cacheBlocks = function() {\n for (var i = 0; i < self.elems.length; i++){\n var block = createBlock(self.elems[i]);\n blocks.push(block);\n }\n };\n\n\n // Let's kick this script off\n // Build array for cached element values\n var init = function() {\n for (var i = 0; i < blocks.length; i++){\n self.elems[i].style.cssText = blocks[i].style;\n }\n\n blocks = [];\n\n screenY = window.innerHeight;\n screenX = window.innerWidth;\n currentBreakpoint = getCurrentBreakpoint(screenX);\n\n setPosition();\n\n cacheBlocks();\n\n animate();\n\n // If paused, unpause and set listener for window resizing events\n if (pause) {\n window.addEventListener('resize', init);\n pause = false;\n // Start the loop\n update();\n }\n };\n\n // We want to cache the parallax blocks'\n // values: base, top, height, speed\n // el: is dom object, return: el cache values\n var createBlock = function(el) {\n var dataPercentage = el.getAttribute( 'data-rellax-percentage' );\n var dataSpeed = el.getAttribute( 'data-rellax-speed' );\n var dataXsSpeed = el.getAttribute( 'data-rellax-xs-speed' );\n var dataMobileSpeed = el.getAttribute( 'data-rellax-mobile-speed' );\n var dataTabletSpeed = el.getAttribute( 'data-rellax-tablet-speed' );\n var dataDesktopSpeed = el.getAttribute( 'data-rellax-desktop-speed' );\n var dataVerticalSpeed = el.getAttribute('data-rellax-vertical-speed');\n var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed');\n var dataVerticalScrollAxis = el.getAttribute('data-rellax-vertical-scroll-axis');\n var dataHorizontalScrollAxis = el.getAttribute('data-rellax-horizontal-scroll-axis');\n var dataZindex = el.getAttribute( 'data-rellax-zindex' ) || 0;\n var dataMin = el.getAttribute( 'data-rellax-min' );\n var dataMax = el.getAttribute( 'data-rellax-max' );\n var dataMinX = el.getAttribute('data-rellax-min-x');\n var dataMaxX = el.getAttribute('data-rellax-max-x');\n var dataMinY = el.getAttribute('data-rellax-min-y');\n var dataMaxY = el.getAttribute('data-rellax-max-y');\n var mapBreakpoints;\n var breakpoints = true;\n\n if (!dataXsSpeed && !dataMobileSpeed && !dataTabletSpeed && !dataDesktopSpeed) {\n breakpoints = false;\n } else {\n mapBreakpoints = {\n 'xs': dataXsSpeed,\n 'sm': dataMobileSpeed,\n 'md': dataTabletSpeed,\n 'lg': dataDesktopSpeed\n };\n }\n\n // initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)\n // ensures elements are positioned based on HTML layout.\n //\n // If the element has the percentage attribute, the posY and posX needs to be\n // the current scroll position's value, so that the elements are still positioned based on HTML layout\n var wrapperPosY = self.options.wrapper ? self.options.wrapper.scrollTop : (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);\n // If the option relativeToWrapper is true, use the wrappers offset to top, subtracted from the current page scroll.\n if (self.options.relativeToWrapper) {\n var scrollPosY = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);\n wrapperPosY = scrollPosY - self.options.wrapper.offsetTop;\n }\n var posY = self.options.vertical ? ( dataPercentage || self.options.center ? wrapperPosY : 0 ) : 0;\n var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;\n\n var blockTop = posY + el.getBoundingClientRect().top;\n var blockHeight = el.clientHeight || el.offsetHeight || el.scrollHeight;\n\n var blockLeft = posX + el.getBoundingClientRect().left;\n var blockWidth = el.clientWidth || el.offsetWidth || el.scrollWidth;\n\n // apparently parallax equation everyone uses\n var percentageY = dataPercentage ? dataPercentage : (posY - blockTop + screenY) / (blockHeight + screenY);\n var percentageX = dataPercentage ? dataPercentage : (posX - blockLeft + screenX) / (blockWidth + screenX);\n if(self.options.center){ percentageX = 0.5; percentageY = 0.5; }\n\n // Optional individual block speed as data attr, otherwise global speed\n var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed);\n var verticalSpeed = dataVerticalSpeed ? dataVerticalSpeed : self.options.verticalSpeed;\n var horizontalSpeed = dataHorizontalSpeed ? dataHorizontalSpeed : self.options.horizontalSpeed;\n\n // Optional individual block movement axis direction as data attr, otherwise global movement direction\n var verticalScrollAxis = dataVerticalScrollAxis ? dataVerticalScrollAxis : self.options.verticalScrollAxis;\n var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;\n\n var bases = updatePosition(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed);\n\n // ~~Store non-translate3d transforms~~\n // Store inline styles and extract transforms\n var style = el.style.cssText;\n var transform = '';\n\n // Check if there's an inline styled transform\n var searchResult = /transform\\s*:/i.exec(style);\n if (searchResult) {\n // Get the index of the transform\n var index = searchResult.index;\n\n // Trim the style to the transform point and get the following semi-colon index\n var trimmedStyle = style.slice(index);\n var delimiter = trimmedStyle.indexOf(';');\n\n // Remove \"transform\" string and save the attribute\n if (delimiter) {\n transform = \" \" + trimmedStyle.slice(11, delimiter).replace(/\\s/g,'');\n } else {\n transform = \" \" + trimmedStyle.slice(11).replace(/\\s/g,'');\n }\n }\n\n return {\n baseX: bases.x,\n baseY: bases.y,\n top: blockTop,\n left: blockLeft,\n height: blockHeight,\n width: blockWidth,\n speed: speed,\n verticalSpeed: verticalSpeed,\n horizontalSpeed: horizontalSpeed,\n verticalScrollAxis: verticalScrollAxis,\n horizontalScrollAxis: horizontalScrollAxis,\n style: style,\n transform: transform,\n zindex: dataZindex,\n min: dataMin,\n max: dataMax,\n minX: dataMinX,\n maxX: dataMaxX,\n minY: dataMinY,\n maxY: dataMaxY\n };\n };\n\n // set scroll position (posY, posX)\n // side effect method is not ideal, but okay for now\n // returns true if the scroll changed, false if nothing happened\n var setPosition = function() {\n var oldY = posY;\n var oldX = posX;\n\n posY = self.options.wrapper ? self.options.wrapper.scrollTop : (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset;\n posX = self.options.wrapper ? self.options.wrapper.scrollLeft : (document.documentElement || document.body.parentNode || document.body).scrollLeft || window.pageXOffset;\n // If option relativeToWrapper is true, use relative wrapper value instead.\n if (self.options.relativeToWrapper) {\n var scrollPosY = (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset;\n posY = scrollPosY - self.options.wrapper.offsetTop;\n }\n\n\n if (oldY != posY && self.options.vertical) {\n // scroll changed, return true\n return true;\n }\n\n if (oldX != posX && self.options.horizontal) {\n // scroll changed, return true\n return true;\n }\n\n // scroll did not change\n return false;\n };\n\n // Ahh a pure function, gets new transform value\n // based on scrollPosition and speed\n // Allow for decimal pixel values\n var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) {\n var result = {};\n var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX)));\n var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY)));\n\n result.x = self.options.round ? Math.round(valueX) : Math.round(valueX * 100) / 100;\n result.y = self.options.round ? Math.round(valueY) : Math.round(valueY * 100) / 100;\n\n return result;\n };\n\n // Remove event listeners and loop again\n var deferredUpdate = function() {\n window.removeEventListener('resize', deferredUpdate);\n window.removeEventListener('orientationchange', deferredUpdate);\n (self.options.wrapper ? self.options.wrapper : window).removeEventListener('scroll', deferredUpdate);\n (self.options.wrapper ? self.options.wrapper : document).removeEventListener('touchmove', deferredUpdate);\n\n // loop again\n loopId = loop(update);\n };\n\n // Loop\n var update = function() {\n if (setPosition() && pause === false) {\n animate();\n\n // loop again\n loopId = loop(update);\n } else {\n loopId = null;\n\n // Don't animate until we get a position updating event\n window.addEventListener('resize', deferredUpdate);\n window.addEventListener('orientationchange', deferredUpdate);\n (self.options.wrapper ? self.options.wrapper : window).addEventListener('scroll', deferredUpdate, supportsPassive ? { passive: true } : false);\n (self.options.wrapper ? self.options.wrapper : document).addEventListener('touchmove', deferredUpdate, supportsPassive ? { passive: true } : false);\n }\n };\n\n // Transform3d on parallax element\n var animate = function() {\n var positions;\n for (var i = 0; i < self.elems.length; i++){\n // Determine relevant movement directions\n var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase();\n var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase();\n var verticalScrollX = verticalScrollAxis.indexOf(\"x\") != -1 ? posY : 0;\n var verticalScrollY = verticalScrollAxis.indexOf(\"y\") != -1 ? posY : 0;\n var horizontalScrollX = horizontalScrollAxis.indexOf(\"x\") != -1 ? posX : 0;\n var horizontalScrollY = horizontalScrollAxis.indexOf(\"y\") != -1 ? posX : 0;\n\n var percentageY = ((verticalScrollY + horizontalScrollY - blocks[i].top + screenY) / (blocks[i].height + screenY));\n var percentageX = ((verticalScrollX + horizontalScrollX - blocks[i].left + screenX) / (blocks[i].width + screenX));\n\n // Subtracting initialize value, so element stays in same spot as HTML\n positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed);\n var positionY = positions.y - blocks[i].baseY;\n var positionX = positions.x - blocks[i].baseX;\n\n // The next two \"if\" blocks go like this:\n // Check if a limit is defined (first \"min\", then \"max\");\n // Check if we need to change the Y or the X\n // (Currently working only if just one of the axes is enabled)\n // Then, check if the new position is inside the allowed limit\n // If so, use new position. If not, set position to limit.\n\n // Check if a min limit is defined\n if (blocks[i].min !== null) {\n if (self.options.vertical && !self.options.horizontal) {\n positionY = positionY <= blocks[i].min ? blocks[i].min : positionY;\n }\n if (self.options.horizontal && !self.options.vertical) {\n positionX = positionX <= blocks[i].min ? blocks[i].min : positionX;\n }\n }\n\n // Check if directional min limits are defined\n if (blocks[i].minY != null) {\n positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY;\n }\n if (blocks[i].minX != null) {\n positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX;\n }\n\n // Check if a max limit is defined\n if (blocks[i].max !== null) {\n if (self.options.vertical && !self.options.horizontal) {\n positionY = positionY >= blocks[i].max ? blocks[i].max : positionY;\n }\n if (self.options.horizontal && !self.options.vertical) {\n positionX = positionX >= blocks[i].max ? blocks[i].max : positionX;\n }\n }\n\n // Check if directional max limits are defined\n if (blocks[i].maxY != null) {\n positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY;\n }\n if (blocks[i].maxX != null) {\n positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX;\n }\n\n var zindex = blocks[i].zindex;\n\n // Move that element\n // (Set the new translation and append initial inline transforms.)\n var translate = 'translate3d(' + (self.options.horizontal ? positionX : '0') + 'px,' + (self.options.vertical ? positionY : '0') + 'px,' + zindex + 'px) ' + blocks[i].transform;\n self.elems[i].style[transformProp] = translate;\n }\n self.options.callback(positions);\n };\n\n self.destroy = function() {\n for (var i = 0; i < self.elems.length; i++){\n self.elems[i].style.cssText = blocks[i].style;\n }\n\n // Remove resize event listener if not pause, and pause\n if (!pause) {\n window.removeEventListener('resize', init);\n pause = true;\n }\n\n // Clear the animation loop to prevent possible memory leak\n clearLoop(loopId);\n loopId = null;\n };\n\n // Init\n init();\n\n // Allow to recalculate the initial values whenever we want\n self.refresh = init;\n\n return self;\n };\n return Rellax;\n}));\n"
},
{
"path": "tests/center.html",
"content": "\n\n\n\t\n\t\n\t\n\t\n\t\n\n\n\t