react-color-scroll

0.1.3 • Public • Published

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. ✨

NPM Version

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

/react-color-scroll/

    Package Sidebar

    Install

    npm i react-color-scroll

    Weekly Downloads

    5

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    466 kB

    Total Files

    8

    Last publish

    Collaborators

    • jsmth