ParallaxWrapper

Example

index.tsx

import { ParallaxWrapper } from "@nguyend-nam/scrollery-ts";
import "./styles.css";
 
export default function ParallaxWrapperDemo() {
  return (
    <div className="layout">
      <h1 className="heading">
        <code>ParallaxWrapper</code>
      </h1>
 
      <div className="message">
        <p>Start scrolling</p>
      </div>
 
      <div className="container">
        <ParallaxWrapper layer={-5} className="item-wrapper">
          <div className="item item-1" />
        </ParallaxWrapper>
 
        <ParallaxWrapper layer={0} className="item-wrapper">
          <div className="item item-2" />
        </ParallaxWrapper>
 
        <ParallaxWrapper layer={5} className="item-wrapper">
          <div className="item item-3" />
        </ParallaxWrapper>
      </div>
    </div>
  );
}

API

Name	Type	Default	Description	Required
children	`JSX.Element`		The single component for the content you want to animate on scroll	✓
style	`CSSProperties`		The styles you want to apply to the wrapper
className	`string`		The classes you want to apply to the wrapper
layer	`number`	`0`	The parallax layer, the larger the value, the faster content transitions
threshold	`number`	`200`	The threshold (in pixels) to start applying the transition when the content enter/leave the viewport

LinearlyScaledWrapper RotateWrapper