Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
react-scroll-parallax
Advanced tools
Readme
React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes Parallax Controller to add vertical or horizontal scrolling based effects to elements. Optimized to reduce jank on scroll and works with SSR and SSG rendered React apps.
If you're coming from V2, here's a migration guide.
See the Storybook for example usage of each component
Some demo websites using Parallax components
With npm
npm install react-scroll-parallax
or yarn
yarn add react-scroll-parallax
The <ParallaxProvider>
must wrap the component tree that contains all <Parallax>
components. This should be a top level component like <App>
. For example:
import { ParallaxProvider } from 'react-scroll-parallax';
function App() {
render() {
return (
<ParallaxProvider>
<AppRoutes />
</ParallaxProvider>
);
}
}
Then import the useParallax
hook and use it anywhere within the provider. Here's an example that uses the speed
prop so simply speed up (or slowdown) the rate of scroll.
import { useParallax } from 'react-scroll-parallax';
const Component = () => {
const { ref } = useParallax({ speed: 10 });
return <div ref={ref} className="my-thing" />;
};
You can also use the Parallax
component. Here's an example that will transform the element on the translateY
axis starting at -20%
and ending at 20%
(translateY = [-20, 20]
*percent is assumed with no provided unit).
import { Parallax } from 'react-scroll-parallax';
const Component = () => (
<Parallax translateY={[-20, 20]}>
<div className="my-thing" />
</Parallax>
);
Example with transforms on the translateX
axis starting at -100px
and ending at 200px
(translateX = ['-100px', '200px']
).
import { Parallax } from 'react-scroll-parallax';
const Component = () => (
<Parallax translateX={['-100px', '200px']}>
<div className="my-thing" />
</Parallax>
);
TODO: Explain how and when effects are applied with some illustrations and demos.
fixed
positioning you will likely want to set the startScroll
and endScroll
values manually, or use a targetElement
to indicate scroll progress.parallaxController.update()
method from any child component of the <ParallaxProvider />
via context. More details on how here: Parallax Controller Context.If you're encountering issues like the parallax element jumping around or becoming stuck, there's a few likely culprits. Since this lib caches important positioning states it's possible for these to be outdated and incorrect. The most likely cause for this type of problem is the result of images loading and increasing the height of an element and/or the page. This can be fixed easily by updating the cache.
Considerations have been taken to reduce jank -- please read more here on how this is done
FAQs
React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
The npm package react-scroll-parallax receives a total of 81,192 weekly downloads. As such, react-scroll-parallax popularity was classified as popular.
We found that react-scroll-parallax demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.