Skip to content

Commit

Permalink
add a note in Usage about updating the ParallaxController when page h…
Browse files Browse the repository at this point in the history
…eight changes
  • Loading branch information
jscottsmith committed Aug 6, 2017
1 parent baa26cf commit 808e52b
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# React Scroll Parallax

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.
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 universal (server-side rendered) React apps.

[View on NPM](https://www.npmjs.com/package/react-scroll-parallax)

Expand Down Expand Up @@ -48,6 +48,8 @@ import { Parallax } from 'react-scroll-parallax';
</Parallax>
```

NOTE: `ParallaxController` caches the scroll state and positions of elements on the page for performance reasons. This means that if the page height changes (perhaps by images loading) after `<Parallax />` components are mounted it won't properly determine when the elements are in view. To correct this call the `update()` once every thing has loaded and ready.

## Parallax Component Props

The following are all props that can be passed to the React `<Parallax />` component:
Expand Down Expand Up @@ -151,4 +153,4 @@ React Scroll Parallax uses a single [passive scroll listener](https://developer.

**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 help achieve silky smooth animations and minimize annoying visitors.
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.

0 comments on commit 808e52b

Please sign in to comment.