diff --git a/.babelrc b/.babelrc index d6f307698..74d754286 100644 --- a/.babelrc +++ b/.babelrc @@ -1,9 +1,29 @@ { - "presets": [["env", { "modules": false }], "react", "stage-0"], - "env": { "test": { - "presets": [["env", { "modules": "commonjs" }], "react", "stage-0"] + "presets": [ + [ + "@babel/preset-env", + { + "modules": "commonjs" + } + ] + ] + }, + "production": { + "presets": [ + [ + "@babel/preset-env", + { + "modules": "commonjs" + } + ] + ] } - } + }, + "presets": ["@babel/preset-react"], + "plugins": [ + "@babel/plugin-proposal-export-default-from", + "@babel/plugin-proposal-class-properties" + ] } diff --git a/.eslintrc b/.eslintrc index 29f5b22f3..3c7341e0b 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,245 +1,218 @@ { - "globals" : { - "ParallaxController": true, - "test": true, - "expect": true - }, - "ecmaFeatures": { - "arrowFunctions": true, - "binaryLiterals": false, - "blockBindings": true, - "classes": true, - "defaultParams": true, - "destructuring": true, - "forOf": true, - "generators": true, - "modules": false, - "objectLiteralComputedProperties": true, - "objectLiteralDuplicateProperties": false, - "objectLiteralShorthandMethods": true, - "objectLiteralShorthandProperties": true, - "octalLiterals": false, - "regexUFlag": false, - "regexYFlag": false, - "restParams": true, - "spread": true, - "superInFunctions": true, - "templateStrings": true, - "unicodePointEscapes": true, - "globalReturn": false, - "jsx": true - }, - "env": { - "es6": true, - "browser": true, - "node": true - }, - "parser": "babel-eslint", - "plugins": [ - "babel", - "react" - ], - "rules": { + "globals": { + "ParallaxController": true + }, + "env": { + "es6": true, + "browser": true, + "node": true, + "jest/globals": true + }, + "settings": { + "react": { + "version": "detect" + } + }, + "parser": "babel-eslint", + "plugins": ["babel", "react", "jest"], + "rules": { + /* Possible Errors */ + "comma-dangle": [1, "always-multiline"], + "no-cond-assign": [1, "except-parens"], + "no-console": 0, + "no-constant-condition": 1, + "no-control-regex": 1, + "no-debugger": 1, + "no-dupe-args": 1, + "no-dupe-keys": 1, + "no-duplicate-case": 0, + "no-empty-character-class": 1, + "no-empty": 0, + "no-ex-assign": 1, + "no-extra-boolean-cast": 1, + "no-extra-parens": 0, + "no-extra-semi": 1, + "no-func-assign": 1, + "no-inner-declarations": [1, "functions"], + "no-invalid-regexp": 1, + "no-irregular-whitespace": 1, + "no-negated-in-lhs": 1, + "no-obj-calls": 1, + "no-regex-spaces": 1, + "no-reserved-keys": 0, + "no-sparse-arrays": 1, + "no-unexpected-multiline": 1, + "no-unreachable": 1, + "use-isnan": 1, + "valid-jsdoc": 0, + "valid-typeof": 1, - /* Possible Errors */ - "comma-dangle": [1, "always-multiline"], - "no-cond-assign": [1, "except-parens"], - "no-console": 0, - "no-constant-condition": 1, - "no-control-regex": 1, - "no-debugger": 1, - "no-dupe-args": 1, - "no-dupe-keys": 1, - "no-duplicate-case": 0, - "no-empty-character-class": 1, - "no-empty": 1, - "no-ex-assign": 1, - "no-extra-boolean-cast": 1, - "no-extra-parens": 0, - "no-extra-semi": 1, - "no-func-assign": 1, - "no-inner-declarations": [1, "functions"], - "no-invalid-regexp": 1, - "no-irregular-whitespace": 1, - "no-negated-in-lhs": 1, - "no-obj-calls": 1, - "no-regex-spaces": 1, - "no-reserved-keys": 0, - "no-sparse-arrays": 1, - "no-unexpected-multiline": 1, - "no-unreachable": 1, - "use-isnan": 1, - "valid-jsdoc": 0, - "valid-typeof": 1, + /* Best Practices */ + "accessor-pairs": 0, + "block-scoped-var": 0, // see Babel section + "complexity": 0, + "consistent-return": 1, + "curly": 0, + "default-case": 0, + "dot-notation": [1, { "allowKeywords": true, "allowPattern": "" }], + "dot-location": [1, "property"], + "eqeqeq": 1, + "guard-for-in": 0, + "no-alert": 1, + "no-caller": 1, + "no-div-regex": 1, + "no-else-return": 1, + "no-eq-null": 0, + "no-eval": 1, + "no-extend-native": 0, + "no-extra-bind": 1, + "no-fallthrough": 0, + "no-floating-decimal": 1, + "no-implied-eval": 1, + "no-iterator": 1, + "no-labels": 1, + "no-lone-blocks": 1, + "no-loop-func": 1, + "no-multi-spaces": 0, + "no-multi-str": 1, + "no-native-reassign": 1, + "no-new-func": 1, + "no-new-wrappers": 1, + "no-new": 1, + "no-octal-escape": 1, + "no-octal": 1, + "no-param-reassign": 0, + "no-process-env": 0, + "no-proto": 0, + "no-redeclare": 1, + "no-return-assign": 1, + "no-script-url": 1, + "no-self-compare": 1, + "no-sequences": 1, + "no-throw-literal": 1, + "no-unused-expressions": 0, + "no-void": 0, + "no-warning-comments": 0, + "no-with": 1, + "radix": 1, + "vars-on-top": 1, + "wrap-iife": [1, "inside"], + "yoda": [1, "never"], - /* Best Practices */ - "accessor-pairs": 0, - "block-scoped-var": 0, // see Babel section - "complexity": 0, - "consistent-return": 1, - "curly": [1, "all"], - "default-case": 0, - "dot-notation": [1, { "allowKeywords": true, "allowPattern": "" }], - "dot-location": [1, "property"], - "eqeqeq": 1, - "guard-for-in": 0, - "no-alert": 1, - "no-caller": 1, - "no-div-regex": 1, - "no-else-return": 1, - "no-eq-null": 0, - "no-eval": 1, - "no-extend-native": 1, - "no-extra-bind": 1, - "no-fallthrough": 0, - "no-floating-decimal": 1, - "no-implied-eval": 1, - "no-iterator": 1, - "no-labels": 1, - "no-lone-blocks": 1, - "no-loop-func": 1, - "no-multi-spaces": 0, - "no-multi-str": 1, - "no-native-reassign": 1, - "no-new-func": 1, - "no-new-wrappers": 1, - "no-new": 1, - "no-octal-escape": 1, - "no-octal": 1, - "no-param-reassign": 0, - "no-process-env": 0, - "no-proto": 1, - "no-redeclare": 1, - "no-return-assign": 1, - "no-script-url": 1, - "no-self-compare": 1, - "no-sequences": 1, - "no-throw-literal": 1, - "no-unused-expressions": 0, - "no-void": 0, - "no-warning-comments": [1, { "terms": ["todo", "tofix"], "location": "start" }], - "no-with": 1, - "radix": 1, - "vars-on-top": 1, - "wrap-iife": [1, "inside"], - "yoda": [1, "never"], + /* Strict Mode */ + "strict": [1, "never"], - /* Strict Mode */ - "strict": [1, "never"], + /* Variables */ + "no-catch-shadow": 0, + "no-delete-var": 1, + "no-label-var": 1, + "no-shadow-restricted-names": 1, + "no-shadow": 1, + "no-undef-init": 1, + "no-undef": 2, + "no-undefined": 0, + "no-unused-vars": 2, + "no-use-before-define": 0, - /* Variables */ - "no-catch-shadow": 0, - "no-delete-var": 1, - "no-label-var": 1, - "no-shadow-restricted-names": 1, - "no-shadow": 1, - "no-undef-init": 1, - "no-undef": 2, - "no-undefined": 0, - "no-unused-vars": [1, { "vars": "local", "args": "after-used" }], - "no-use-before-define": 0, + /* Node.js */ + "handle-callback-err": 1, + "no-mixed-requires": 1, + "no-new-require": 1, + "no-path-concat": 1, + "no-process-exit": 1, + "no-restricted-modules": [1, ""], // add any unwanted Node.js core modules + "no-sync": 1, - /* Node.js */ - "handle-callback-err": 1, - "no-mixed-requires": 1, - "no-new-require": 1, - "no-path-concat": 1, - "no-process-exit": 1, - "no-restricted-modules": [1, ""], // add any unwanted Node.js core modules - "no-sync": 1, + /* Stylistic Issues */ + "array-bracket-spacing": [1, "never"], + "brace-style": [2, "1tbs"], + "camelcase": [1, { "properties": "always" }], + "comma-spacing": [1, { "before": false, "after": true }], + "comma-style": [1, "last"], + "computed-property-spacing": 0, + "consistent-this": 0, + "eol-last": 1, + "func-names": 0, + "func-style": 0, + "indent": 0, + "key-spacing": [1, { "beforeColon": false, "afterColon": true }], + "linebreak-style": 0, + "max-nested-callbacks": [0, 3], + "new-cap": 0, // see Babel section + "new-parens": 1, + "newline-after-var": 0, + "no-array-constructor": 1, + "no-continue": 1, + "no-inline-comments": 0, + "no-lonely-if": 1, + "no-mixed-spaces-and-tabs": 1, + "no-multiple-empty-lines": [1, { "max": 1 }], + "no-nested-ternary": 0, + "no-new-object": 1, + "no-spaced-func": 1, + "no-ternary": 0, + "no-trailing-spaces": 1, + "no-underscore-dangle": 0, + "no-unneeded-ternary": 1, + "object-curly-spacing": 0, // see Babel section + "one-var": [1, "never"], + "operator-assignment": [1, "never"], + "padded-blocks": [0, "never"], + "quote-props": [0, "as-needed"], + "quotes": 0, + "semi-spacing": [1, { "before": false, "after": true }], + "semi": [1, "always"], + "sort-vars": 0, + "space-after-keywords": 0, + "space-before-blocks": [1, "always"], + "space-before-function-paren": [1, "never"], + "space-in-parens": [1, "never"], + "space-infix-ops": 1, + "space-unary-ops": 0, + "spaced-comment": [1, "always"], + "wrap-regex": 1, - /* Stylistic Issues */ - "array-bracket-spacing": [1, "never"], - "brace-style": [2, "1tbs"], - "camelcase": [1, { "properties": "always" }], - "comma-spacing": [1, { "before": false, "after": true }], - "comma-style": [1, "last"], - "computed-property-spacing": 0, - "consistent-this": 0, - "eol-last": 1, - "func-names": 0, - "func-style": 0, - "indent": [1, 4], - "key-spacing": [1, { "beforeColon": false, "afterColon": true }], - "linebreak-style": 0, - "max-nested-callbacks": [0, 3], - "new-cap": 0, // see Babel section - "new-parens": 1, - "newline-after-var": 0, - "no-array-constructor": 1, - "no-continue": 1, - "no-inline-comments": 0, - "no-lonely-if": 1, - "no-mixed-spaces-and-tabs": 1, - "no-multiple-empty-lines": [1, { "max": 1 }], - "no-nested-ternary": 0, - "no-new-object": 1, - "no-spaced-func": 1, - "no-ternary": 0, - "no-trailing-spaces": 1, - "no-underscore-dangle": 0, - "no-unneeded-ternary": 1, - "object-curly-spacing": 0, // see Babel section - "one-var": [1, "never"], - "operator-assignment": [1, "never"], - "padded-blocks": [0, "never"], - "quote-props": [0, "as-needed"], - "quotes": [1, "single"], - "semi-spacing": [1, { "before": false, "after": true }], - "semi": [1, "always"], - "sort-vars": 0, - "space-after-keywords": 0, - "space-before-blocks": [1, "always"], - "space-before-function-paren": [1, "never"], - "space-in-parens": [1, "never"], - "space-infix-ops": 1, - "space-unary-ops": 0, - "spaced-comment": [1, "always"], - "wrap-regex": 1, + /* ECMAScript 6 */ + "constructor-super": 1, + "generator-star-spacing": 1, + "no-this-before-super": 1, + "no-var": 1, + "object-shorthand": 1, + "prefer-const": 1, - /* ECMAScript 6 */ - "constructor-super": 1, - "generator-star-spacing": 0, // see Babel section - "no-this-before-super": 1, - "no-var": 1, - "object-shorthand": 0, // see Babel section - "prefer-const": 1, + /* Legacy */ + "max-depth": [0, 3], + "max-len": [0, 121, 2], + "max-params": 0, + "max-statements": 0, + "no-bitwise": 1, + "no-plusplus": 0, - /* Legacy */ - "max-depth": [0, 3], - "max-len": [0, 121, 2], - "max-params": 0, - "max-statements": 0, - "no-bitwise": 1, - "no-plusplus": 1, + /* Babel */ + "babel/new-cap": 1, + "babel/object-curly-spacing": [1, "always"], - /* Babel */ - "babel/object-shorthand": [1, "always"], - "babel/generator-star-spacing": [1, "after"], - "babel/new-cap": 1, - "babel/object-curly-spacing": [1, "always"], - - /* React */ - "jsx-quotes": [1, "prefer-double"], - "react/display-name": 1, - "react/jsx-boolean-value": 1, - "react/jsx-indent": [1, 4], - "react/jsx-indent-props": [1, 4], - "react/jsx-no-duplicate-props": 1, - "react/jsx-no-undef": 1, - "react/jsx-sort-props": 0, - "react/jsx-uses-react": 1, - "react/jsx-uses-vars": 1, - "react/no-danger": 1, - "react/no-did-mount-set-state": 1, - "react/no-did-update-set-state": 1, - "react/no-multi-comp": 1, - "react/no-unknown-property": 1, - "react/prop-types": 1, - "react/react-in-jsx-scope": 1, - "react/self-closing-comp": 1, - "react/sort-comp": 1, - "react/sort-prop-types": 1, - "react/wrap-multilines": 0, - } + /* React */ + "jsx-quotes": [1, "prefer-double"], + "react/display-name": 1, + "react/jsx-boolean-value": 1, + "react/jsx-indent": [1, 4], + "react/jsx-indent-props": [1, 4], + "react/jsx-no-duplicate-props": 1, + "react/jsx-no-undef": 1, + "react/jsx-sort-props": 0, + "react/jsx-uses-react": 1, + "react/jsx-uses-vars": 1, + "react/no-danger": 1, + "react/no-did-mount-set-state": 1, + "react/no-did-update-set-state": 1, + "react/no-multi-comp": 0, + "react/no-unknown-property": 1, + "react/prop-types": 1, + "react/react-in-jsx-scope": 1, + "react/self-closing-comp": 1, + "react/sort-comp": 1, + "react/sort-prop-types": 1, + "react/wrap-multilines": 0 + } } diff --git a/.gitignore b/.gitignore index 03eadfe48..144ce856a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,11 @@ -node_modules -coverage -dist -build +/.cache +/build +/cjs +/coverage +/dist +/esm +/node_modules +/yarn-error.log + npm-debug.log +.DS_STORE \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..993e2f8ce --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +package.json +node_modules \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..b00e266c2 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "useTabs": false, + "printWidth": 80, + "tabWidth": 4, + "singleQuote": true, + "trailingComma": "es5", + "jsxBracketSameLine": false +} diff --git a/.storybook/addons.js b/.storybook/addons.js index 8523bb5b2..22c78e490 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -1,3 +1,2 @@ // Addons go here - -// import '@storybook/addon-knobs/register'; +import '@storybook/addon-knobs/register'; diff --git a/.storybook/config.js b/.storybook/config.js index ff01a26e5..1ca0f11a7 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -5,13 +5,6 @@ import { withKnobs } from '@storybook/addon-knobs'; import { ParallaxProvider } from 'react-scroll-parallax'; import React from 'react'; -// Decorate all stories with ParallaxProvider and center styles -const CenterDecorator = storyFn => ( -
- {storyFn()} -
-); - // reset the window on each story const withWindowReset = storyFn => { window.scrollTo(0, 0); @@ -20,7 +13,6 @@ const withWindowReset = storyFn => { addDecorator(withKnobs); addDecorator(withWindowReset); -addDecorator(CenterDecorator); const req = require.context('../stories', true, /\.stories\.js$/); diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index eb5a8fc3e..712ad6518 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -11,10 +11,6 @@ const SRC = path.resolve('./src'); const STORIES = path.resolve('./stories'); module.exports = { - plugins: [ - // your custom plugins - ], - resolve: { alias: { 'react-scroll-parallax': SRC, @@ -25,30 +21,16 @@ module.exports = { module: { rules: [ { - test: /\.js$/, - include: SRC, - loader: 'babel-loader', - }, - { - test: /\.scss$/, - include: STORIES, - loaders: [ + test: /\.scss|.css$/, + use: [ 'style-loader', { loader: 'css-loader', - query: { - localIdentName: '[name]_[local]_[hash:base64:3]', - importLoaders: 1, - }, - }, - 'postcss-loader', - { - loader: 'sass-loader', - query: { - outputStyle: 'expanded', - }, + options: { importLoaders: 1, modules: true }, }, + 'sass-loader', ], + include: STORIES, }, ], }, diff --git a/.travis.yml b/.travis.yml index 73dc33810..216a53080 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,27 +1,13 @@ language: node_js node_js: - - "7" + - '8' cache: - directories: - - "node_modules" + directories: + - 'node_modules' script: yarn test && codecov && yarn storybook:export deploy: - skip-cleanup: true - provider: surge - project: build - domain: react-scroll-parallax-v1.surge.sh - on: dev -# TODO: Fix this gh-pages deploy. -# https://docs.travis-ci.com/user/deployment/pages/ -# https://github.com/travis-ci/dpl/pull/501/files - # provider: pages - # skip-cleanup: true - # name: "jscottsmith" - # email: "jscsmith@gmail.com" - # github-token: GITHUB_TOKEN - # committer-from-gh: true - # verbose: true - # keep-history: true - # local-dir: build - # on: - # branch: dev \ No newline at end of file + skip-cleanup: true + provider: surge + project: build + domain: react-scroll-parallax-next.surge.sh + on: next diff --git a/README.md b/README.md index 9bca83bb5..4eeb00463 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,15 @@ [![npm version](https://badge.fury.io/js/react-scroll-parallax.svg)](https://badge.fury.io/js/react-scroll-parallax) [![Build Status](https://travis-ci.org/jscottsmith/react-scroll-parallax.svg?branch=master)](https://travis-ci.org/jscottsmith/react-scroll-parallax) [![codecov](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/master/graph/badge.svg)](https://codecov.io/gh/jscottsmith/react-scroll-parallax) -React components to create parallax scroll effects for banners, images or any other DOM elements. Uses a single scroll listener to add **vertical** scrolling based offsets to elements based on their position in the viewport. [Optimized](#optimizations-to-reduce-jank) to _reduce_ jank on scroll and works with universal (server-side rendered) React apps. +React components to create parallax scroll effects for banners, images or any other DOM elements. Uses a single scroll listener to add vertical or horizontal scrolling based offsets to elements based on their position in the viewport. [Optimized](#optimizations-to-reduce-jank) to _reduce_ jank on scroll and works with universal (server-side rendered) React apps. -## Examples - -Some links demonstrating possible effects created with this lib: +If you're coming from [v1](https://github.com/jscottsmith/react-scroll-parallax/tree/v1), here's a [migration guide](https://github.com/jscottsmith/react-scroll-parallax/blob/next/docs/migration-guide.md). -* [Example Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/) -* [Storybook](http://react-scroll-parallax-v1.surge.sh/) -* [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-test/) -* [CodePen Parallax](https://codepen.io/jscottsmith/pen/eREbwz) -* [CodePen Parallax Banner](https://codepen.io/jscottsmith/pen/aVBvGj) +## Examples -You can also view [the source code for these examples](https://github.com/jscottsmith/react-scroll-parallax-examples) on Github. +- [Storybook](http://react-scroll-parallax-next.surge.sh) +- [Demo 1](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/) - [Source](https://github.com/jscottsmith/react-scroll-parallax-examples) +- [Demo 2](https://react-scroll-parallax.netlify.com/) - [Source](https://github.com/jscottsmith/react-parallax-site) ## Install @@ -32,19 +28,20 @@ yarn add react-scroll-parallax ## Overview -* [Usage](#usage) -* [``](#parallax) - * [Parallax Props](#parallax-props) -* [``](#parallaxbanner) - * [Banner Usage](#banner-usage) - * [Banner Props](#banner-props) - * [Banner Layers Prop](#banner-layers-prop) -* [``](#parallaxprovider) - * [Parallax Controller Context](#parallax-controller-context) - * [Available Methods](#available-methods) -* [Browser Support](#browser-support) -* [Optimizations to Reduce Jank](#optimizations-to-reduce-jank) - * [PSA](#psa) +- [Usage](#usage) +- [``](#parallax) + - [Parallax Props](#parallax-props) +- [``](#parallaxbanner) + - [Banner Usage](#banner-usage) + - [Banner Props](#banner-props) + - [Banner Layers Prop](#banner-layers-prop) +- [``](#parallaxprovider) + - [ParallaxProvider Props](#parallaxprovider-props) + - [Parallax Controller Context](#parallax-controller-context) + - [Available Methods](#available-methods) +- [Browser Support](#browser-support) +- [Optimizations to Reduce Jank](#optimizations-to-reduce-jank) + - [PSA](#psa) ## Usage @@ -70,20 +67,16 @@ Import the `Parallax` component and use it anywhere within the provider like so: import { Parallax } from 'react-scroll-parallax'; const ParallaxImage = () => ( - + ); ``` + **Warnings:** + 1. This lib was designed to be used on `relative` or `absolute` positioned elements that scroll naturally with the page. If you use `fixed` positioning on either the element itself or the parent you will encounter issues. More on that in [troubleshooting](#troubleshooting). -2. Scroll state and positions of elements on the page are cached for performance reasons. This means that if the page height changes (most likely from [images loading](#example-usage-of-context)) after `` components are mounted the controller won't properly determine when the elements are in view. To correct this you can call the `parallaxController.update()` method from any child component of the `` via `context`. More details on how here: [Parallax Controller Context](#parallax-controller-context). +2. Scroll state and positions of elements on the page are cached for performance reasons. This means that if the page height changes (most likely from [images loading](#example-usage-of-context)) after `` components are mounted the controller won't properly determine when the elements are in view. To correct this you can call the `parallaxController.update()` method from any child component of the `` via context and the `withController()` HOC. More details on how here: [Parallax Controller Context](#parallax-controller-context). ## \ @@ -93,18 +86,16 @@ The main component for manipulating a DOM element's position based on it's posit The following are all props that can be passed to the `` component: -| Name | Type | Default | Description | -| -------------------- | :------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **className** | `String` | | Optionally pass additional class names to be added to the outermost parallax element. | -| **disabled** | `Boolean` | `false` | Determines if the component will have parallax offsets applied. If `true` parallax styles are completely removed from the element and it is no longer updated. | -| **offsetXMax** | `Number` or `String` | `0` | Maximum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. | -| **offsetXMin** | `Number` or `String` | `0` | Minimum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. | -| **offsetYMax** | `Number` or `String` | `0` | Maximum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height. | -| **offsetYMin** | `Number` or `String` | `0` | Minimum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height. | -| **slowerScrollRate** | `Boolean` | `false` | Internally swaps the min/max offset y values of the parallax component to give the appearance of moving faster or slower than the default rate of scroll. | -| **styleInner** | `Object` | | Optionally pass a style object to be added to the innermost parallax element. | -| **styleOuter** | `Object` | | Optionally pass a style object to be added to the outermost parallax element. | -| **tag** | `String` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. | +| Name | Type | Default | Description | +| -------------- | :-----------------------------: | :------- | ------------------------------------------------------------------------------------------------------------------ | +| **x** | `Array` of `String` or `Number` | `[0, 0]` | Offsets on x-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. | +| **y** | `Array` of `String` or `Number` | `[0, 0]` | Offsets on y-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. | +| **className** | `String` | | Optionally pass additional class names to be added to the outermost parallax element. | +| **disabled** | `Boolean` | `false` | Disables parallax effects on individual elements when `true`. | +| **styleInner** | `Object` | | Optionally pass a style object to be added to the innermost parallax element. | +| **styleOuter** | `Object` | | Optionally pass a style object to be added to the outermost parallax element. | +| **tagInner** | `String` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. | +| **tagOuter** | `String` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. | ## \ @@ -121,12 +112,10 @@ Use the `layers` prop to indicate all images, offset amounts, and scroll rates. { image: 'https://foo.com/foo.jpg', amount: 0.1, - slowerScrollRate: false, }, { image: 'https://foo.com/bar.png', amount: 0.2, - slowerScrollRate: false, }, ]} style={{ @@ -141,24 +130,23 @@ Use the `layers` prop to indicate all images, offset amounts, and scroll rates. The following are all props that can be passed to the `` component: -| Name | Type | Default | Description | -| ------------- | :-------: | :------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **className** | `String` | | Optionally pass additional class names to be added to the outermost parallax banner element. | -| **disabled** | `Boolean` | `false` | Determines if the internal parallax layers will have offsets applied. | -| **layers** | `Array` | | A required `Array` of `Objects` with layer properties: `[{ amount: 0.1, image: 'foo.jpg', slowerScrollRate: false }]`. [See layers prop below](#banner-layers-prop) | -| **style** | `Object` | | Optionally pass a style object to be added to the outermost parallax banner element. | +| Name | Type | Default | Description | +| ------------- | :-------: | :------ | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **className** | `String` | | Optionally pass additional class names to be added to the outermost parallax banner element. | +| **disabled** | `Boolean` | `false` | Determines if the internal parallax layers will have offsets applied. | +| **layers** | `Array` | | A required `Array` of `Objects` with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`. [See layers prop below](#banner-layers-prop) | +| **style** | `Object` | | Optionally pass a style object to be added to the outermost parallax banner element. | ### Banner Layers Prop The `layers` prop takes an array of objects that will represent each image (or custom children) of the parallax banner. The following properties describe a layer object: -| Name | Type | Default | Description | -| -------------------- | :-------: | :------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| **amount** | `Number` | | A value from `0 – 1` that represents the vertical offset to be applied to the current layer, `0.1` would equal a `10%` offset on the top and bottom. | -| **children** | `Element` | | Custom layer children provided as a React element, for example `