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. If you have ideas to further optimize scrolling please PR or post an issue. All offsets are applied with 3D transforms to utilize the GPU and prevent paints. Request animation frame is then used to decouple the scroll handler and further reduce jank. React Scroll Parallax uses a single passive scroll listener (dependent on browser support) with the minimal amount of work done on the scroll event to prevent jank (calculations that cause layout, reflow and paint are cached initially and only updated when layout changes). If you encounter any errors for browsers that should be supported please post an issue. React scroll parallax should support the last two versions of all major browsers and has been tested on desktop Chrome, Firefox, Safari and Edge, as well as the following: iOS 9, iOS 10, Android 4 and IE11. This component should only be used once in you app, for instance in an component that won't be mounted/unmounted during route changes. The component is meant to wrap a top level component in your application and is necessary to provide access though React's context API to the parallax controller. Optionally pass an element tag name to be applied to the outermost parallax element. Optionally pass a style object to be added to the outermost parallax element Optionally pass a style object to be added to the innermost parallax element Internally swaps the min/max offset y values of the parallax component to give the appearance of moving faster or slower than the default rate of scroll. ![]() If true parallax styles are completely removed from the element and it is no longer updated. ![]() Optionally pass additional class names to be added to the outer most parallax element.ĭetermines if the component will have parallax offsets applied. The following are all props that can be passed to the React component: Name More details on how here: Parallax Controller Context. To correct this you can call the parallaxController.update() method from any child component of the via context. This means that if the page height changes (most likely from images loading) after components are mounted the controller won't properly determine when the elements are in view. NOTE: Scroll state and positions of elements on the page are cached for performance reasons.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |