react-scroll-zoom-effect v0.3.0

React Scroll Zoom Effect

Make your page more dynamic with scroll effects.

Install:

npm install react-scroll-zoom-effect
yarn add react-scroll-zoom-effect

How to use:

<ZoomScroll>
	<YourComponent />
</ZoomScroll>

Examples

Icon examples use max={1.1}\ Gradient example from gif above:

<div
    style={{
    marginBottom: "2rem",
    height: "2rem",
    background: "blue",
    width: "100%",
    }}
>
    <ScrollZoom
    scale={200}
    style={{
        height: "2rem",
        background:
        "linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%)",
    }}
    ></ScrollZoom>
</div>

Params

Sway: boolean

Move with direction of scroll\ Default: false\ Example: Lists, Dividers , masks , gradients

Shrink: boolean

Shrink instead of zoom\ Default: false Example: UI regions

Show: boolean

Toggle zoom effect on/off\ Example: Only show on dark mode\ Default: true

Max/Min: number

TBD\ Currently # >= 0\ Default: 0\ Notes: Works well with 0~0.5 Ref storybook examples

Scale: number

TBD\ Default: 100

To Do List

• Point CodeSandBox to StoryBook instead of src/index
• Export type definitions
• Test Cross Browser Support