react-villax v1.0.11

react-villax

React Parallax with background video support.

This is originally forked from react-parallax.

Install

npm i react-villax

Demo on codesandbox

Usage examples

Basic - background video

import { Parallax } from 'react-villax';

const Container = () => (
    <Parallax blur={10} bgVideo="path/to/video.mp4" strength={200}>
        Content goes here. Parallax height grows with content height.
    </Parallax>
);

Optional props to use

• bgVideoStyle - optional styles
• bgVideoType - 'video/mp4' or 'video/webm' or 'video/ogg' - default = 'video/mp4'
• muted - boolean - default = true
• autoPlay - boolean - default = true
• loop - boolean - default = true

Example

import { Parallax } from 'react-villax';

const Container = () => (
    <Parallax
        bgVideo="path/to/video.mp4"
        muted={false}
        loop={false}
        bgVideoStyle={{
            opacity: 0.6,
        }}
    >
        Content goes here. Parallax height grows with content height.
    </Parallax>
);