react over-scroll
A scroll based slideshow with wings.
OverScroll is a slide-show or content-slider, call it what you want. It is a full-screen/viewport element that snaps into fixed mode when it reaches the viewports top edge. Scrolling is now translated to paging, switching the content each time a predefined scroll amount has been reached. During an active slide two values are available.
Render
The children of OverScroll expect a function which is called with two arguments.
Example 1
const renderSlide = (slide, percent) => (
<div>
<div>You are on Slide {slide + 1}</div>
<div>{percent}% of this slide has been scrolled</div>
</div>
)
// Usage
// <OverScroll slides={10} children={renderSlide} />
Example 2
const pages = [<div>Hello</div>,<div>World</div>]
const slider = (
<OverScroll slides={pages.length}>
{(page, progress) => (
<div>
<section>
{pages[page]}
</section>
<footer>
<div>Page {page + 1}</div>
<div>
<span style={{
width: `${progress}%`,
height: 10,
background: 'currentcolor'
}}/>
</div>
</footer>
</div>
)}
</OverScroll>
)
// Usage
// {slider}
Development
If you want to build this module from source or contribute to this project you
should follow the steps listed below.
Setup
npm install
Run dev server
npm start
Watch for file changes
npm run watch
Known issues: CSS does not work with livereload and requires a manual browser reload.
