React-full-parallax NPM

Getting Started With React Full Parallax

Installation

npm install react-full-parallax

What is React Full Parallax

React Full Parallax is a react component library that makes implementing the fullpage and parallax scrolling effects into your React Application a lot easier. It ships with plenty of easing effects to make your fullpage scroll animations much cooler.

Fullpage Scrolling

To implement the fullpage scrolling effect, you have to import the Scroll component. Notice that it is not a default export.

import { Scroll } from 'react-full-parallax';

Next, wrap the Scroll component around the components/sections that you want you want to fullpage scroll.

Each component under the Scroll component should have a height of 100vh, otherwise the the fullpage scroll will be thrown off. The Scroll component should only nest the components/sections that you want to apply the effect to, any extra elements will cause a miscalculation of how many pages there are, and therefore, cause boundary issues.

The Scroll component accepts the props, duration, transitionEffect, controls, controlsColor, onScroll, initialPage and afterScroll.

duration: The animation's duration in milliseconds. The default is 1000.\ transitionEffect: Defines how to transition between pages. Below is a list you can choose from. The default is EASE_IN_OUT_CUBIC (passed as a string).\ controls: Takes a string with id's separated by commas of links/buttons which when clicked, cause the window to scroll to the page corresponding to the index of that particular id.

Example

<Scroll controls = "#link-to-page-1, #link-to-page-2, , #link-to-page-4"/>

The clicked link/button will also be given the css class selected-page which you can style in your css file.

controlsColor: The desired color theme for the controls in HEX, RGB or named colors (passed as a string). The default is #cccc.\ onScroll: Function that is called everytime the window scrolls to another page, it takes the index (0 Based) of the shown page as an argument.\ initialPage: The page (0 based index) to show initially or to start scrolling from. The default is 0.\ afterScroll: An array of objects that has functions that are fired immidiately after scrolling from a specific page. Each of these objects should have the following properties:

page: Index of page to scroll from (1 based)
direction: The scroll direction ('DOWN' or 'UP')
functStart: Function that executed as soon as scrolling starts
delayStart: Time in milliseconds to delay the calling of funcStart
funcEnd: Function that gets executed as soon as scrolling finishes
delayEnd: Time in milliseconds to delay the calling of funcEnd.

Example

import {Scroll} from 'react-full-parallax';
const App = () => {
          return(
              <Scroll controls>
                 <section className="fullpage" id="page-1">
                    PAGE ONE
                 </section>
                 <section className="fullpage" id="page-1">
                    PAGE TWO
                 </section>
              </Scroll>
          );
}

Obviously some css was used to size and position the elements on the page.

Fullpage scroll demo

Fullpage Slide

import { Slide } from 'react-full-parallax';

The Slide is very similar to the Scroll component. It takes the exact same props and it is wraped around the components/sections with widths of 100vw. It takes an additional prop, slideMode, which is an object with two properties, automatic and timeInterval. SlideMode describes whether the slide should slide automatically or only manually through controls.\ automatic: Boolean which specifies whether the slide should be automatic or manual.\ timeInterval: The time interval in milliseconds between each slide.

Default:

{
    automatic: true,
    timeInterval: 5000,
}

Example

import {Slide} from 'react-full-parallax';
const App = () => {
          return(
              <Slide>
                 <section className="fullpage" id="page-1">
                    SLIDE ONE
                 </section>
                 <section className="fullpage" id="page-1">
                    SLIDE TWO
                 </section>
              </Slide>
          );
}

Fullpage Slide demo

Easing Functions

EASE_IN_CUBIC
EASE_OUT_CUBIC
EASE_IN_OUT_CUBIC
EASE_IN_SINE
EASE_OUT_SINE
EASE_IN_OUT_SINE
EASE_IN_QUAD
EASE_OUT_QUAD
EASE_IN_OUT_QAUD
EASE_IN_QUART
EASE_OUT_QUART
EASE_IN_OUT_QUART
EASE_IN_QUINT
EASE_OUT_QUINT
EASE_IN_OUT_QUINT
EASE_IN_EXPO
EASE_OUT_EXPO
EASE_IN_OUT_EXPO
EASE_IN_CIRC
EASE_OUT_CIRC
EASE_IN_OUT_CIRC
EASE_IN_BACK
EASE_OUT_BACK
EASE_IN_OUT_BACK
EASE_IN_ELASTIC
EASE_OUT_ELASTIC
EASE_IN_OUT_ELASTIC
EASE_IN_BOUNCE
EASE_OUT_BOUNCE
EASE_IN_OUT_BOUNCE

Parallax

To implement the parallax effect you need the Scroll component wrapped around the components/sections that you want to apply the effect to, then pass as a prop, an array of of strings. Each string contains the configuration for each element that you want to add the parallax effect to. The strings should be in this format: "#id, parentPage, rate, orientation, occursOnce".

id: The id of the element to parallax. Example '#image1'.\ rate: The transition speed of the element. The sign of the value provided (+/-) determines the direction of the element. Expected values range from -3 to 3.\ parentPage: The parent page of the parallax element. This property does not have a default value and is required.\ orientation: Expects either of the values: HORIZONTAL and VERTICAL. This determines whether to move the element horizontally or vertically.\ occursOnce: States whether the element should parallax only once or multiple times.

When applying the parallax effect, please pay attention the the z-indices of your elements.

Example

import {Scroll} from 'react-full-parallax';

const App = () => {
          const parallax = [
             "#par-bg, 1, 0.5, VERTICAL",
             "#par-girl, 1, 0.1, VERTICAL",
             "#title, 1, 0.7, VERTICAL, occursOnce"
          ];

 return(
        <Scroll parallax={parallax} transitionEffect='EASE_IN_OUT_SINE'>
             <section className="full-page">
                <img className="full-image" src={bg} id="par-bg"/>
                <h1 id ='title'>DISCOVER PARZ</h1>
                <img className="full-image" src={girl} id="par-girl"/>
             </section>
        </Scroll>
    )
}

Parallax Demo