React Parallax Galaxy

The Parallax Galaxy Plugin is a lightweight and customizable JavaScript plugin designed to add parallax effects to elements on a webpage. The plugin allows elements to move at different speeds and directions based on the user’s scroll position, creating an engaging and dynamic user experience.

Demo url : https://simplifyscript.com/javascript-parallax-scrolling-effect/

Installation

To install the package, run: npm install parallax-galaxy

Usage

import React from 'react';
import ParallaxGalaxy from 'parallax-galaxy';
import './App.css'; // Make sure to include any necessary CSS for styling

const App = () => (
  <ParallaxGalaxy>
    <div data-ease="0.5" data-opacity="1" data-diagonally="0.1" data-scale="0.1" data-rotate="0.1">
      Parallax Content
    </div>
    <div data-ease="1" data-opacity="0.5" data-diagonally="0.2" data-scale="0.2" data-rotate="0.2">
      Another Parallax Content
    </div>
  </ParallaxGalaxy>
);

export default App;