Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-scroll-parallax
Advanced tools
A small library of components for creating vertical scroll based effects like parallax based on an element's position in the viewport. Works with universal (server-side rendered) React apps.
Scroll effects can cause lots of jank. The following optimizations attempt to limit this jank:
getBoundingClient
that cause paints, reflow and layoutThe following are supported effects
Warning: This is currently a prerelease. For a stable version of this library use v1.
npm i react-scroll-parallax@next --save
This package also requires support for the Intersection Observer API. Since this isn't supported in older browsers (or the latest Safari and no update as to when it will land) you will need to add a polyfill.
npm i intersection-observer --save
There are two main components to be utilized in this library:
<ParallaxProvider>
<Parallax>
components via context.<Parallax>
@TODO: Document other internal components that can be used.
Wrap your app that will contain <Parallax>
components with the <ParallaxProvider>
which will provide the necessarycontext
to child components.
import { ParallaxProvider } from 'react-scroll-parallax';
const Root = () => (
<ParallaxProvider>
<App />
</ParallaxProvider>
);
Import <Parallax>
then add some props and give it some children to render.
import { Parallax } from 'react-scroll-parallax';
<Parallax
x={['-50%', '75%']}
y={['-100px', '100px']}
scale={[0.5, 1.5]}
opacity={[1, 0]}
className="foo"
>
<div className="bar" />
</Parallax>
The following are all props that can be passed to the React <Parallax />
component.
For effect props such as x
, y
, scale
, and opacity
an Array
with two elements must be provided. This represents the start and end values of the effect.
Name | Type | Description |
---|---|---|
x | Array | translateX offsets, first value is the starting position, second is the ending position. Accepts units of px or % . Integers without units default to px . |
y | Array | translateY offsets, first value is the starting position, second is the ending position. Accepts units of px or % . Integers without units default to px . |
scale | Array | scale effect, first value is the starting scale, second is the ending scale. Only accepts positive integers. |
opacity | Array | opacity effect, first value is the starting opacity, second is the ending opacity. Only accepts integers between 0–1. |
className | String | class to be applied to the outermost <div> . |
observerOptions | Object | options given to the Intersection Observer contructor. |
You can access the progress
and isInView
properties from a render callback. Here's an example:
<Parallax>
{({ isInView, progress }) => (
<div>
<div>Progress: {progress}</div>
<div>{isInView ? "I'm visibile" : "Can't see me" }</div>
</div>
)}
</Parallax>
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 48,872 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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.