1.0.3 • Published 1 year ago
static-scroll v1.0.3
static-scroll
Capture scroll and turn into beautiful animations. Create animations based on percentage of scroll. Keyframe by scroll percentage.
Install
npm install --save static-scrollDemo Usage
Visit homepage to see demo usage Visit mirror if the former site is not available.
Usage
import React, { Component } from 'react'
import StaticScroll from 'static-scroll'
import 'static-scroll/dist/index.css'
const ExampleComponent = {
const [slide, setSlide] = useState(0)
return (
<StaticScroll updateScroll={(x) => setSlide(x)}>
<div className='h-100 w-100 red d-flex center'>
<div className='white-text'>
<h1 style={{transform: "scale(" + (1 + slide * 5) + ")"}}>
Scroll down to start
</h1>
</div>
</div>
</StaticScroll>)
}Arguments
| Argument | Type | Explaination |
|---|---|---|
numPages | int | defines the number of virtual pages a user have to scroll. defaults to 3 |
updateScroll | (int)=>Unit | call back to handle the scroll percentage value from 0 to 1 |
numSnaps | int or null | if your page has window snapping, you will not be able to scroll down unless you explicilty define the number of snapping points within the virual scroll space. Defaults to null. |
License
MIT © Sooryakiran