https://github.com/JosephSmith127/react-color-scroll
Blend through colors as you scroll down the page.
https://github.com/JosephSmith127/react-color-scroll
Last synced: 15 days ago
JSON representation
Blend through colors as you scroll down the page.
- Host: GitHub
- URL: https://github.com/JosephSmith127/react-color-scroll
- Owner: jsmmth
- Created: 2018-05-17T02:13:32.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T05:27:10.000Z (about 3 years ago)
- Last Synced: 2024-05-22T01:13:15.779Z (11 months ago)
- Language: JavaScript
- Size: 260 KB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components - react-color-scroll - Change and blend new colors on the background as you scroll. (UI Components / Miscellaneous)
README
# 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][npm-image]][npm-url]
## Install
```bash
npm i -S react-color-scroll
```
## Usage
```jsx
import React from 'react'
import ColorScroll from 'react-color-scroll'
class HomePage extends React.PureComponent {
render () {
return (
console.log(e)} // Optional access to the onScroll event
>
{/* Your site content in here */}
)
}
}
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](http://vjpr.mit-license.org)
[npm-image]: https://img.shields.io/npm/v/react-color-scroll.svg
[npm-url]: https://npmjs.org/package/react-color-scroll