Skip to content

Commit dfeb9ba

Browse files
committed
documenting ParallaxController public methods in README
1 parent b875f5b commit dfeb9ba

File tree

1 file changed

+10
-4
lines changed

1 file changed

+10
-4
lines changed

README.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,17 @@ Determines whether the scroll rate of the parallax component will move faster or
109109

110110
Optionally pass a tag name to be applied to the outer most parallax element. For example: `<Parallax tag="figure" />`.
111111

112+
## Parallax Controller
112113

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`.
113123

114124
## Development
115125

@@ -127,14 +137,10 @@ Run Jest tests:
127137

128138
`npm run test`
129139

130-
131140
## Optimizations to reduce Jank and keep scrolling smooth
132141

133142
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.
134143

135144
**PSA**
136145

137146
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.
138-
139-
140-

0 commit comments

Comments
 (0)