react-css-parallax

A css-based parallax background to be used with react

Demo

https://kevinrodriguez-io.github.io/react-css-parallax

Install

npm install --save react-css-parallax

Features

• [x] Relies on backgroundAttachment
• [x] Supports fixed to disable the parallax effect
• [x] Simple, customizable api
• [x] Adds underlying, hidden img tag when alt is present
• [x] Supports passProps

Usage

import React, { Component } from 'react'

import Parallax from 'react-css-parallax'

class Example extends Component {
  render () {
    return (
      <Parallax src="https://kevinrodriguez.io/kevinbackground.jpg" alt="A nice keyboard" height="100vh" />
      <Parallax src="https://kevinrodriguez.io/kevinbackground.jpg" alt="A nice keyboard" height="100vh" fixed {/*Disables the parallax effect*/} />
    )
  }
}

License

MIT © kevinrodriguez-io