react-scroll-parallax
Advanced tools
react-scroll-parallax - npm Package Compare versions
Comparing version 1.3.0 to 1.3.1
| { | ||
| "name": "react-scroll-parallax", | ||
| "version": "1.3.0", | ||
| "description": "React component to create parallax scrolling effects", | ||
| "version": "1.3.1", | ||
| "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", | ||
| "repository": { | ||
@@ -30,4 +30,5 @@ "type": "git", | ||
| "react", | ||
| "scroll", | ||
| "parallax", | ||
| "scroll", | ||
| "banner", | ||
| "animation", | ||
@@ -34,0 +35,0 @@ "component" |
@@ -5,3 +5,3 @@ # React Scroll Parallax | ||
| Provides a React component and single passive scroll listener to add **vertical** scrolling based offsets to elements based on their position in the viewport. 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** 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. | ||
@@ -32,2 +32,18 @@ ## Examples | ||
| ## Overview | ||
| * [Usage](#usage) | ||
| * [`<Parallax>`](#parallax) | ||
| * [Parallax Props](#parallax-props) | ||
| * [`<ParallaxBanner>`](#parallaxbanner) | ||
| * [Banner Usage](#banner-usage) | ||
| * [Banner Props](#banner-props) | ||
| * [Banner Layers Prop](#banner-layers-prop) | ||
| * [`<ParallaxProvider>`](#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 | ||
@@ -73,5 +89,5 @@ | ||
| The main component for manipulating an element's position based on scroll position within the viewport. | ||
| The main component for manipulating a DOM element's position based on it's position within the viewport. | ||
| ### Props | ||
| ### Parallax Props | ||
@@ -95,7 +111,7 @@ The following are all props that can be passed to the `<Parallax>` component: | ||
| Component that utilizes `<Parallax>` components to achieve a parallaxing banner effect. | ||
| Component that utilizes `<Parallax>` components to achieve a parallaxing banner effect. Allows a single or multiple images to be parallaxed at different rates within the banner area. | ||
| ### Example Usage | ||
| ### Banner Usage | ||
| Use the `layers` prop to indicate all images, offset amounts and scroll rates. Optionally pass additional children to be rendered. Styles of the outermost banner element can also be changed. Here's an example: | ||
| Use the `layers` prop to indicate all images, offset amounts, and scroll rates. Optionally pass additional children to be rendered. Styles of the outermost banner element can also be changed. Here's an example: | ||
@@ -125,16 +141,16 @@ ```jsx | ||
| ### Props | ||
| ### Banner Props | ||
| The following are all props that can be passed to the `<ParallaxBanner>` 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](#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', 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. | | ||
| ### Layers Prop | ||
| ### Banner Layers Prop | ||
| The `layers` props takes an array of objects that will represent each image of the parallax banner. The following properties describe a layer: | ||
| The `layers` prop takes an array of objects that will represent each image of the parallax banner. The following properties describe a layer object: | ||
@@ -230,4 +246,4 @@ | Name | Type | Description | | ||
| **PSA** | ||
| ### **PSA** | ||
| It's 2017 and you probably shouldn't be building parallax sites—but if you do (like I did) and you use this package try and use it responsibly. Keeping images small and optimized, reducing the number of moving elements in view and on the page, and disabling scroll effects on mobile devices should keep scrolling smooth. | ||
| Even with these optimizations scroll effects can cause jank. If you use this lib make sure to keep images small and optimized, reduce the number of moving elements in view and on the page in total, and disable scroll effects on mobile devices. That should keep scrolling smooth and users happy. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.22%
388796
- Number of lines in readme file
- increased by7.02%
244
No dependency changes