brlamco / react-color-scroll

Blend through colors as you scroll down the page.

React color scroll

React color scroll is a simple component which allows you to blend between colors as you're scrolling down the page. You can use it to fill an entire page, or within a wrapped container. ✨

Install

npm i -S react-color-scroll

Usage

import React from 'react'
import ColorScroll from 'react-color-scroll'

class HomePage extends React.PureComponent {
  render () {
    return (
      <ColorScroll
        colors={['#FFFCF9', '#FFF9F9', '#FCF9FF']}
        className='my-color-scroll' // Defaults to 'color-scroll'
        onScroll={(e) => console.log(e)} // Optional access to the onScroll event
      >
        {/* Your site content in here */}
      </ColorScroll>
    )
  }
}

export default HomePage

It works by splitting up the container's scroll height and calculating the correct time to blend between colors for each color to have an equal percentage of your content.

License

MIT