GitHub

I just published OverScroll a scroll based content-slider for #reactjs #javascript on #npm

  • const renderSlide = ( slide , percent ) => ( < div > < div >You are on Slide { slide + 1 } < div > { percent } % of this slide has been scrolled ) // Usage //
  • A scroll based slideshow with wings
  • If you want to build this module from source or contribute to this project you should follow the steps listed below.
  • Known issues: CSS does not work with livereload and requires a manual browser reload.
  • During an active slide two values are available.

react-over-scroll – A scroll based slideshow with wings

@GregorAdams: I just published OverScroll a scroll based content-slider for #reactjs #javascript on #npm

demo docs(demo): better demo page Jan 12, 2017

docs docs(demo): better demo page Jan 12, 2017

src docs(demo): better demo page Jan 12, 2017

readme.md docs(npm): mpn install info Jan 11, 2017

A scroll based slideshow with wings.

API Documentation

Demo

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. (See Render for more information). Take a look at the Demo to get a better understanding of the behavior.

The children of OverScroll expect a function which is called with two arguments.

const renderSlide = (slide, percent) => (

You are on Slide { slide + 1 }
{ percent }% of this slide has been scrolled

) // Usage //

const pages = [

Hello

,

World

] const slider = ( { (page, progress) => (

{ pages[page] }
Page { page + 1 }

) } ) // Usage // {slider}

If you want to build this module from source or contribute to this project you should follow the steps listed below.

Known issues: CSS does not work with livereload and requires a manual browser reload.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub