react-scroll-collision

A react component that provide a High Order Component to wrap fixed element that have to cross different color section.

Getting Started

A new class will be added to the wrapped element when entering in specific section. You will be able that way to change text color, svg fill or stroke color or whatever you want by only set css paramters into the provided className.

To identify specific section, just put "data-clippath=" followed by the class name you want to assign to the wrapped element.

This project was inspired by https://github.com/salsita/jq-clipthru and is fully developped with React (PureComponent with state management).

No JQuery.

Installing

A step by step series of examples that tell you how to get a development env running

Say what the step will be

npm install --save react-scroll-collision

Usage

import ReactScrollCollision from 'react-scroll-collision'; // The import name is up to you 

Example

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ScrollCollision from 'react-scroll-collision';

const App = () => (
    <div>
        <ScrollCollision className="Elem1">Test element fixed bottom left</ScrollCollision>
        <ScrollCollision className="Elem2">Top center</ScrollCollision>
        <ScrollCollision className="Elem3">Bottom Right</ScrollCollision>

        <div className="Block-White">
          
        </div>
        <div className="Block-Black" data-clippath="ColorWhite">
        
        </div>
        <div className="Block-White">
        
        </div>
        <div className="Block-Black" data-clippath="ColorGray">
        
        </div>
        <div className="Block-White">
        
        </div>
      </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

.Block-White,
.Block-Black {
  width: 100%;
  height: 50vh;
}

.Block-White {
  background: white;
}

.Block-Black {
  background: black;
}

.ColorWhite{
  color: white;
  fill: white;
}

.ColorGray{
  color: lightgray;
  fill:gray;
}

.Elem1 {
  position: fixed;
  top: 25%;
  left: 10%;
  height: 20px;
  width: 300px;
}

.Elem2 {
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  height: 17px;
  width: 150px;
}

.Elem3 {
  position: fixed;
  top: 25%;
  right: 10%;
  height: 20px;
  width: 150px;
}

.ElemSVG {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  height: 100px;
  width: 100px;
}

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Hat tip to anyone whose code was used
• Inspiration
• etc