Skip to content
This repository has been archived by the owner on May 20, 2022. It is now read-only.

A simple React Component for parallax effect on the front layer.

License

Notifications You must be signed in to change notification settings

kwemi/react-simple-parallax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-simple-parallax

A simple React Component for parallax effect on the front layer.

alt tag

Install

npm install -S react-simple-parallax

Usage

import Parallax from 'react-simple-parallax';

class App extends React.Component {
  render () {
	return (
		<section>
		  	<Parallax className="parallax" speedDivider="5">
		  		<div>Hello World!</div>
		  	</Parallax>
		</section>
	);
  }
}

Basic styling

    section {
        text-align: center;
    }
    
    /* .react-simple-parallax-bg is generate by the component */
    section .react-simple-parallax-bg {
        background-image: url('http://tinyurl.com/zaz7bp4');
        height: 750px;
    }
    
    section .parallax {
        top: 200px;
        margin: auto;
    }

Attributes

  • speedDivider: controle translation speed (default: 5)
  • backgroundStyle: to set the style of the background element with a javascript object (optional)

Example

  render () {
	var background = {
		height: "1000px",
		backgroundImage: 'url(http://tinyurl.com/zaz7bp4)'
	}
	return (
		<section>
		  	<Parallax speedDivider="3" backgroundStyle={background}>
		</section>
		)
  }

Build the example

Initial set up

npm install

Install Webpack

npm install webpack -g

Build the example

webpack

Open /src/index.html

License

MIT

About

A simple React Component for parallax effect on the front layer.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published