parallax-react-js

parallax-react-js

Table of contents

1. Introduction
   • Description
   • Shoutout to Max Lukonin
2. Installation
   • Using npm
   • Manual Installation
3. Usage
   • Import
   • Creating a Parallax effect
   • Scroll speed
   • zIndex
4. License

Introduction

Description

A libary for managing scroll speed of different components in react.

I recently found myself creating a site in react together with a friend of mine (Max Lukonin) and wanting to implement a parallax effect. We tried a few different libaries, pure css and everything else but it just did not work.

So we decided to create our own libary.

Shoutout to Max Lukonin

This project is a collaboration between me (Instagram, Github) and Max Lukonin (Instagram, Github). He's a very talented guy. Check out his other project playretrogames.net (Website) where you can play all kinds of fun retro games. I personally recommend mario kart :D

Installation

Using npm

You can install parallax-react-js normally through npm:

npm install parallax-react-js

Manual installation

Alternatively you can also install parallax-react-js directyl from the source code:

1. clone the repository with git clone https://github.com/juliuswaldmann/parallax-react-js.git
2. open a terminal inside of the repository folder.
3. compile the package with npx tsc -p tsconfig.json
4. run npm pack to create a .tgz file of the package (npm link DOES NOT work. You have to use npm pack).
5. go to the project folder you want to install the package to and open a terminal.
6. run npm install TARBALL where TARBALL is the path to the .tgz file npm pack created.

Usage

Import

parallax-react-js exposes two components: ParallaxContainer and ParallaxLayer. To use them just import them like this:

import {ParallaxContainer, ParallaxLayer} from 'parallax-react-js';

Creating a parallax effect

ParallaxContainer must be the scrollable element. To create a parallax effect you must wrapp your ParallaxLayers with ParallaxContainer

import {ParallaxContainer, ParallaxLayer} from 'parallax-react-js';

function Site () {

  return (
    <div className="Site">  
      <ParallaxContainer> //Wrapp your ParallaxLayers in ParallaxContainer. 
      
        //Each ParallaxLayer can have it's own children, own speed and own zIndex.
        <ParallaxLayer> //fist layer
          //Your children of the first layer
          //...
        </ParallaxLayer>
        
        <ParallaxLayer> //second layer
          //Your children of the second layer
          //...
        </ParallaxLayer>
        //...
      </ParallaxContainer>
    </div>
  )

}

Scroll speed

If you've followed along you may have noticed that each Layer just scrolls at the usual scroll speed. This is because we haven't provided a "speed" value yet.

  //...
  <ParallaxContainer>
      <ParallaxLayer speed="120%"> //this layer has a scroll speed of 120%
        //...
      </ParallaxLayer>
      <ParallaxLayer speed="80%"> //this layer has a scroll speed of 80%
        //...
      </ParallaxLayer
   </ParallaxContainer>
   //...

As you can see the "speed" value is a percentage that describes the scroll speed of the children realtive to the normal scroll speed. A ParallaxLayer with a speed value of 120% percent scrolls 1.2 times faster than normal, a layer with the speed value 50% scrolls half as fast. The scroll value defaults to 100% (normal scroll speed). You can also provide negative values for some really strange behaviour :D.

zIndex

But what if we want to specify which elements are in the front and which are in the back? We have a solution for that! You can just provide a "zIndex" value.

  //...
      <ParallaxLayer speed="80%" zIndex={2}> //this layer has a zIndex of 2
        //...
      </ParallaxLayer>
  //...

If you are familiar with css you may know z-index. It specifies which elements are on top of whith. zIndex specifies the z-index of the ParallaxLayer main div. The higher the zIndex value the "more in front" the element is. If one Layer has a zIndex of -1 and another a zIndex of 0 the one with the zIndex of 0 is in front. If another one has a zIndex of 2 that one is even more in front. If you don't provide a zIndex the value defaults to 0 (just like in css)

License

This code is licensed under the MIT license. For further Information read the LICENSE file.

MIT Licensed. Copyright (c) Julius Waldmann & Max Lukonin 2021.