https://github.com/mortonprod/react-fade-background-component

This is a component which will fade in colour over background image as you scroll down
https://github.com/mortonprod/react-fade-background-component

react

Last synced: 1 day ago
JSON representation

This is a component which will fade in colour over background image as you scroll down

• Host: GitHub
• URL: https://github.com/mortonprod/react-fade-background-component
• Owner: mortonprod
• Created: 2017-09-13T22:40:11.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-13T23:02:56.000Z (over 7 years ago)
• Last Synced: 2024-11-08T05:26:06.567Z (about 2 months ago)
• Topics: react
• Language: JavaScript
• Homepage:
• Size: 835 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-fade-background-component

This component will place background behind children.

The fade in should complete before the bottom of background image is at the botton of viewport.

The background image size is determined from the size of the viewport. It uses width to centre and changes with media queries to get the correct height.

The background fill covers all the children.

Child should not rerender since props/state internal have not changed. 

Furthermore, the virtual dom will mitigate any perf impact.

Overflow should be hidden so we can't scroll oto side. Must not attach to main div so we can scroll app passed as child.

MUST SPECIFY POSITION TO USE OVER-FLOW WITH ABSOLUTE AND RELATIVE ELEMENTS

 

## Installation

To install this component into your project run:

`npm install @mortonprod/react-fade-background-component`

## Usage

Import the component like so: 

`

import Product from @mortonprod/react-fade-background-component

`

then import the css:

`

import @mortonprod/react-fade-background-component/dist/index.css

` 

Note you must pull the css independently of the component. 

## Contributing

You are free to contribute to this component if you wish.