You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# React Scroll Parallax
2
2
3
-
Provides a React component and single global passive scroll listener to add **vertical**scroll based offsets to elements based on their position in the viewport. Works with serverside rendering and universal react apps.
3
+
Provides a React component and single global passive scroll listener to add **vertical**scrolling based offsets to elements based on their position in the viewport. Works with server-side rendering and universal React apps.
4
4
5
5
[View on NPM](https://www.npmjs.com/package/react-scroll-parallax)
6
6
@@ -12,9 +12,9 @@ Provides a React component and single global passive scroll listener to add **ve
12
12
13
13
## Install
14
14
15
-
⚠️ **Warning: This is an alpha pre-release**
15
+
⚠️ **Warning: This is a beta pre-release**
16
16
17
-
Please anticipate the possibility of breaking changes in future releases before using this package.
@@ -115,7 +115,7 @@ The following are public methods available on the `ParallaxController` global:
115
115
116
116
**`update()`**
117
117
118
-
Updates all cached attributes for parallax elements then updates their postitions.
118
+
Updates all cached attributes for parallax elements then updates their positions.
119
119
120
120
**`destroy()`**
121
121
@@ -139,10 +139,10 @@ Run Jest tests:
139
139
140
140
`npm run test`
141
141
142
-
## Optimizations to reduce Jank and keep scrolling smooth
142
+
## Optimizations to Reduce Jank
143
143
144
144
React Scroll Parallax uses a single [passive scroll listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners) (dependent on browser support) with the minimal amount of work done on the scroll event to prevent [jank](http://jankfree.org/) (calculations that cause layout, reflow and paint are cached initially and only updated when layout changes). Request animation frame is then used to decouple the scroll handler and further reduce jank. All offsets are applied with 3D transforms to utilize the GPU and prevent paints. If you have ideas to further optimize scrolling please PR or post an issue.
145
145
146
146
**PSA**
147
147
148
-
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. Keep images small and optimized. Reduce the number of moving elements in view and on the page. Disable scroll effects on mobile devices. Just keep things performant and animation silky smooth.
148
+
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 help achieve silky smooth animations and minimize annoying visitors.
0 commit comments