@lifeondesk/react-parallax-grid

Create stunning parallax effects for your Web Applications! Use our intuitive grid layout for positioning your elements and GSAP for animating them smoothly!

Installation

To install the library, use npm or yarn:

npm install @lifeondesk/react-parallax-grid

or

yarn add @lifeondesk/react-parallax-grid

Usage

To use the React Parallax Component Library:

1. Import the library's CSS file in your application.

import '@lifeondesk/react-parallax-grid/index.css';

2. Wrap your components

Use the ParallaxContainer component and create a grid layout using ParallaxSlide, ParallaxGrid, ParallaxGridBox, and ParallaxGridItem. You can apply parallax effects to individual elements within the grid by using GSAP for animations.

import React from 'react';
import { ParallaxContainer, ParallaxSlide, ParallaxGrid, ParallaxGridBox, ParallaxGridItem } from '@lifeondesk/react-parallax-grid';
import { gsap } from 'gsap';

const MyParallaxComponent = () => {
  return (
    <ParallaxContainer>
      <ParallaxSlide rows={3} columns={3} style={parallaxSlideStyle} key={`title-card`}>
        <ParallaxGrid>
          <ParallaxGridBox row={1} column={1} zIndex={1}>
            {[1, 2, 3].map((_, index) => (
              <ParallaxGridItem
                key={`grid-item-${index}`}
                style={parallaxGridItemStyle}
                animations={[
                  (item) => {
                    gsap.to(item.current, {
                      yPercent: 90, // The parallax movement percentage
                      ease: 'power3.out', // Easing with some inertia-like smoothness
                      scrollTrigger: {
                        trigger: item.current,
                        start: 'top 1%', // Start the animation when the element is 80% into the viewport
                        end: 'bottom top', // End when the element reaches the top of the viewport
                        scrub: 2, // A higher scrub value to give a lagging, mass-like feel
                        // inertia: true, // Adds a physics-based motion feel
                      },
                    });
                  },
                ]}
              />
            ))}
          </ParallaxGridBox>
        </ParallaxGrid>
      </ParallaxSlide>
    </ParallaxContainer>
  );
};

Customize Your Parallax Sections!

The React Parallax Component Library offers extensive customization options using CSS. Take advantage of the multiple components to create visually captivating parallax sections tailored to your web application's design.

Components

1. ParallaxSlide

The ParallaxSlide component is used to create full-screen slides with a parallax effect. It provides a visually appealing way to present content in a slide format. The ParallaxSlide component itself represents a single slide, and it can contain other parallax components such as ParallaxGrid, ParallaxGridBox, and ParallaxGridItem.

import { ParallaxSlide } from '@lifeondesk/react-parallax-grid';

const ExampleComponent = () => {
  const parallaxSlideStyle = {
    overflow: 'hidden',
    backgroundImage: 'url("https://plus.unsplash.com/premium_photo-1680742443429-29c93d33138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80")',
  };

  return (
    <ParallaxSlide style={parallaxSlideStyle}>
      {/* Your parallax elements */}
    </ParallaxSlide>
  );
};

Props

• className (optional): Additional CSS class for the slide container.
• style (optional): Additional inline styles for the slide container.
• children (optional): Child components to be placed within the slide.

The ParallaxSlide component allows you to set a custom background image using the parallaxSlideStyle prop. Inside the ParallaxSlide, you can place other parallax components, such as ParallaxGrid, ParallaxGridBox, and ParallaxGridItem, to create a rich and dynamic parallax effect for your slide.

2. ParallaxGrid

The ParallaxGrid component is a container for arranging your parallax elements in a grid layout. It provides a responsive grid system for positioning your elements.

import { ParallaxGrid } from '@lifeondesk/react-parallax-grid';

const ExampleComponent = () => {
  return (
    <ParallaxSlide style={parallaxSlideStyle}>
      <ParallaxGrid rows={3} columns={3}>
        {/* Your parallax elements */}
      </ParallaxGrid>
    </ParallaxSlide>
  );
};

Props

• rows (optional): The number of rows in the grid. Default is 3.
• columns (optional): The number of columns in the grid. Default is 3.
• className (optional): Additional CSS class for the grid container.
• style (optional): Additional inline styles for the grid container.
• children (optional): Child components to be placed within the grid.

3. ParallaxGridBox

The ParallaxGridBox component represents a cell within the ParallaxGrid. It allows you to add parallax effects to individual grid cells.

import { ParallaxGridBox } from '@lifeondesk/react-parallax-grid';

const ExampleComponent = () => {
  return (
    <ParallaxSlide style={parallaxSlideStyle}>
      <ParallaxGrid rows={3} columns={3}>
        <ParallaxGridBox row={2} column={2}>
          {/* Your parallax elements */}
        </ParallaxGridBox>
      </ParallaxGrid>
    </ParallaxSlide>
  );
};

Props

• row (optional): The row position of the box within the grid.
• column (optional): The column position of the box within the grid.
• rowSpan (optional): The number of rows the box should span. Default is 1.
• columnSpan (optional): The number of columns the box should span. Default is 1.
• zIndex (optional): The z-index value for the box. Default is 1.
• className (optional): Additional CSS class for the grid box.
• style (optional): Additional inline styles for the grid box.
• children (optional): Child components to be placed within the box.

4. ParallaxGridItem

The ParallaxGridItem component is a child component of ParallaxGridBox. It represents an individual element within a grid cell and can have its own parallax effect.

import { ParallaxGridItem } from '@lifeondesk/react-parallax-grid';

const ExampleComponent = () => {
  return (
    <ParallaxSlide style={parallaxSlideStyle}>
      <ParallaxGrid rows={3} columns={3}>
        <ParallaxGridBox row={2} column={2}>
          <ParallaxGridItem>
            {/* Your parallax elements */}
          </ParallaxGridItem>
        </ParallaxGridBox>
      </ParallaxGrid>
    </ParallaxSlide>
  );
};

Props

• className (optional): Additional CSS class for the grid item.
• style (optional): Additional inline styles for the grid item.
• children (optional): Child components to be placed within the item.

License

This project is licensed under the ISC License.

Contributions

Contributions to this project are welcome! If you encounter any issues or have suggestions for improvements, please open an issue or submit a pull request on GitHub.

Changelog

Credits

This library is developed and maintained by lifeondesk.

Thank you for using @lifeondesk/react-parallax-grid! If you have any questions or need further assistance, please feel free to reach out. Happy parallaxing! 🌟