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
+10-4Lines changed: 10 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -109,7 +109,17 @@ Determines whether the scroll rate of the parallax component will move faster or
109
109
110
110
Optionally pass a tag name to be applied to the outer most parallax element. For example: `<Parallax tag="figure" />`.
111
111
112
+
## Parallax Controller
112
113
114
+
The following are public methods available on the `ParallaxController` global:
115
+
116
+
**`update()`**
117
+
118
+
Updates all cached attributes for parallax elements then updates their postitions.
119
+
120
+
**`destroy()`**
121
+
122
+
Removes window scroll and resize listeners, resets all styles applied to parallax elements, and sets the global `ParallaxController` to `null`.
113
123
114
124
## Development
115
125
@@ -127,14 +137,10 @@ Run Jest tests:
127
137
128
138
`npm run test`
129
139
130
-
131
140
## Optimizations to reduce Jank and keep scrolling smooth
132
141
133
142
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.
134
143
135
144
**PSA**
136
145
137
146
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.
0 commit comments