The Parallax Galaxy

Overview

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.

Features

• Multiple Parallax Elements: Apply parallax effects to multiple elements within a specified container.
• Customizable Effects: Control the speed, direction, scale, rotation, and opacity of elements based on scroll position.
• Easy Initialization: Simply initialize the plugin, and it will automatically apply effects to all elements that match the specified selectors.

Installation

Include the script for the Parallax Galaxy Plugin in your project:

1<script src="path/to/parallaxGalaxy.js"></script>

Usage

HTML Structure

To use the Parallax Galaxy Plugin, your HTML should be structured as follows:

                      

                      <div class="parallax-container">

                      <div data-ease="0.5" data-diagonally="0.2" data-scale="0.05" data-rotate="1" data-opacity="0.8">

                      <!-- Content here -->

                      </div>

                      <div data-ease="0.3" data-rotate="0.5">

                      <!-- Content here -->

                      </div>

                      </div>
                      
                      
                      

Data Attributes

• data-ease: Defines the vertical scroll speed of the element relative to the window scroll. Lower values move slower.
• data-diagonally: Defines the horizontal scroll speed of the element relative to the window scroll. Lower values move slower.
• data-scale: Defines the scaling factor of the element as it scrolls. Positive values increase the size, while negative values decrease it.
• data-rotate: Defines the rotation angle of the element in degrees as it scrolls.
• data-opacity: Defines the starting opacity of the element, which decreases as the user scrolls down the page.

JavaScript Initialization

After including the plugin script, initialize it with the following JavaScript code:

parallaxGalaxy.init();

This will automatically apply the parallax effects to all elements within the .parallax-container that have the necessary data-* attributes.

API Reference

parallaxGalaxy
The main object containing all methods and properties of the plugin.

Properties

• parallaxElements: An array to store all elements that will have the parallax effect applied.
• selectors: Contains the CSS selectors used to find the parallax container and elements.
  • parallaxContainer: The selector for the main container that holds the parallax elements. Default: “.parallax-container”
  • parallaxElement: The selector for individual parallax elements. Default: “div[data-ease]”

Methods

• applyParallax(elements): The core function that calculates and applies the parallax effects based on the scroll position.
• elements: An array of elements to which the parallax effects will be applied.
• init(): Initializes the plugin by finding all relevant elements and applying the parallax effects. It automatically calls applyParallax().

Customization

The Parallax Galaxy Plugin can be customized by modifying the selectors property to target different containers or elements. Additionally, you can add more data attributes to control other CSS properties as needed.

Browser Compatibility

The Parallax Galaxy Plugin is compatible with all modern browsers that support querySelectorAll, addEventListener, and CSS transform properties.

License

This plugin is open-source and available under the MIT License.