🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-parallax-scroll

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-parallax-scroll

React library for creating parallax scrolling

0.1.1
latest
npm
Version published
Maintainers
1
Created
Source

React Parallax Scroll

A lightweight React library for creating parallax scroll.

Demo

Banner Parallax Demo

Awesome Animated Demo

Install

npm install react-parallax-scroll

Parallax Usage

import React from 'react';
import Parallax, { Layer } from 'react-parallax-scroll'; 

const App = () => {
  return (
    <Parallax>
        {/* ----- Banner parallax -----*/}
        <Layer settings={{ speed: 0.2, type: 'backgroundY' }}>
            <p>A child element</p>
        </Layer>
        
        {/* ----- PositionY parallax -----*/}
        <Layer settings={{ speed: 0.2, type: 'translateY' }}></Layer>
        
        {/* ----- PostionY parallax in reverse direction -----*/}
        <Layer settings={{ speed: -0.2, type: 'translateY' }}></Layer>
        
        {/* ----- PositionX parallax -----*/}
        <Layer settings={{ speed: 0.2, type: 'translateX' }}></Layer>
        
        {/* ----- Zoom parallax -----*/}
        <Layer settings={{ speed: 0.2, type: 'rotate' }}></Layer>
        
        {/* ----- Put Layer to wherever you like -----*/}
        <div>
            <div>
                <Layer settings={{ speed: 0.2, type: ['rotate'] }}></Layer>
            </div>
        </div>
    </Parallax>
  )
}

export default App;

Available types:

TypeDescription
backgroundYchange container's background vertically
backgroundXchange container's background horizontally
translateYchange container's position vertically
translateXchange container's position horizontally
rotaterotate container

Appear Usage

If you're familiar with wowjs, it should be the same behavior. In this section, I use animated.css for my component. You can create your own animated classes if you're comfortable with.

import React from 'react';
import Parallax, { AppearLayer } from 'react-parallax-scroll'; 
import './animated.css';

const App = () => {
  return (
    <Parallax>
        {/* ----- appear with .rotateIn class and duration 1.5 seconds -----*/}
        <AppearLayer className="whatever" in="rotateIn" duration="1.5s">A simple text</AppearLayer>
        
        {/* ----- appear with .slideInUp -----*/}
        <AppearLayer className="whatever-1" in="slideInUp" duration="1s">
            <p>An element</p>
        </AppearLayer>
        
        {/* ----- appear with 3 times loop -----*/}
        <AppearLayer in="rotateIn" duration="1.5s" loop="3">Play 3 times</AppearLayer>
        
        {/* ----- appear with infinite loop -----*/}
        <AppearLayer in="heartBeat" duration="1.5s" loop="infinite">Play forever</AppearLayer>
    </Parallax>
  )
}

export default App;

Keywords

parallax

FAQs

Package last updated on 25 Oct 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts