A scroll based slideshow with wings

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.