Joomla Parallax Scroll

Parallax Scroll — Documentation

Parallax Scroll is a lightweight, high-performance Joomla 6 module developed by
LogicHunt.
It enables developers and site administrators to build immersive web sections featuring smooth, hardware-accelerated
background parallax scrolling animations. Version 2.0.0 introduces a modern, type-safe layout codebase supporting multi-instance isolation,
custom media backgrounds, overlay configurations, and semantic inner content delivery without file modifications.

Module name mod_parallax_scroll
Version 2.0.0
Joomla compatibility Joomla 6.x
PHP compatibility PHP 8.2+ (PHP 8.3 Ready)
License GNU/GPL v3
Author LogicHunt
Support logichunt.com/support

Requirements

  • Joomla 6.0 or later
  • PHP 8.2 or later (PHP 8.3 fully supported)
  • A Joomla administrator account with extension installation access
  • A front-end template compliant with modern HTML5 layout trees and CSS3 scroll transitions

Installation

Fresh Installation

  1. Download the latest stable module ZIP archive file from the official
    Parallax Scroll product page.
  2. Log in to your Joomla backend administration panel
    (e.g., https://yoursite.com/administrator).
  3. Navigate to System inside the primary sidebar and select Install → Extensions.
  4. Select the Upload Package File tab layout, then drag and drop the installer archive or click Browse for file to choose it from your local storage.
  5. The core handles processing automatically. Upon success, look for the green confirmation toast message: “Installation of the module was successful.”

Upgrading from a Previous Version

⚠ Important — Upgrading to version 2.0.0+: This iteration completely transitions from legacy procedural modules to modern namespaced PSR-4 directory structures and Service Provider dependency injection containers. If you are updating an environment running version 1.x or older:

  1. Go to System → Manage → Extensions, search for the old module, and uninstall it.
  2. Go to System → Maintenance → Clear Cache and execute a Delete All command.
  3. Verify via FTP or File Manager that the following root folder has been removed completely: modules/mod_parallax_scroll/
  4. Upload and install the new version package fresh using the standard installation steps defined above.

Publishing the Module

  1. Go to Content → Site Modules using your main management panel view.
  2. Find Parallax Scroll in your module entries. If it does not appear immediately, adjust your Status search filters to All.
  3. Click on the module instance title string to open its administrative workspace layer.
  4. Locate the Module configuration block column on the right side and set:

    • Status → Published
    • Position → Select an active template module position mapping matching your layout framework rules (e.g., banner, top-a, footer).
  5. Map your desired rendering visibility choices under the Menu Assignment tab properties, tune your fields, and click Save & Close.
💡 Tip: You can place multiple parallax banners across one landing layout with different settings by utilizing the core Save as Copy feature to safely duplicate configurations.

How to Use — Quick Start

Step 1 — Set Up Your Dimensions and Layout Plan

Open your active module instance workspace. Under the Basic tab layout, establish your target design boundaries using explicit numeric entries for heights and structural container percentage scales.

Step 2 — Assign Background Graphics or Overlay Colors

Determine whether your section requires a dynamic graphic asset background image or a stylized responsive solid overlay:

  1. To deploy an image, toggle Enable Background Image to Yes and map your media asset using the core picker.
  2. To apply specific contrast filters over your background graphics or build solid section colors, toggle Enable Background Color to Yes.
  3. Choose your preferred target hex color value and adjust the Background Color Opacity slider matrix tool to ensure high readability.

Step 3 — Deploy Corporate Brand Assets and Typography Headers

Populate your layout canvas with targeted marketing messaging assets directly from the management controls:

  1. Toggle Enable Logo to display structural brand assets, selecting the file via the Media Manager and setting custom bounding limits.
  2. Toggle Enable Title to inject a prominent header overlay layer onto the parallax scroll canvas, complete with explicit custom font size selections.
  3. Toggle Enable Subtitle to populate descriptions inside the canvas space. The module engine uses an open parsing parameter, meaning it natively allows raw semantic markup arrays without stripping code.
ℹ Note: The subtitle text zone safely handles raw paragraphs, anchor links, text styling variables, custom CSS utility overrides, and embedded media frames. Always close your HTML tags cleanly to maintain design structural integrity.

Step 4 — Save Configurations and Rebuild Registries

Click Save & Close in the administrative action row, then visit your front-end layout frame to evaluate live scroll behaviors. If your media selections fail to display immediately, run System → Clear Cache to clear active system caching.

Options Reference

Basic Tab Configuration Panel

Option Parameter Default Value Functional Core Behavior & Value Requirements
Section Height ( px ) 550 Sets the absolute vertical layout boundary limit for the parallax section in pixels. Accepts integer metrics.
Section Width 100 Defines the total width percentage ratio of the outer viewport boundary. Set to 100 to enforce seamless edge-to-edge layouts.
Enable Background Image 1 Radio switcher controlling graphic asset backdrop generation rules:
1 = Enable Background Image (Yes)
0 = Disable Graphic Backdrop (No)
Upload Background Image — Media field selector linking cleanly to the Joomla Media Manager directory layout. Used to assign structural background graphic files.
Enable Background Color 1 Radio switcher handling the generation of color overlay layer blocks:
1 = Apply Color Filter Overlay (Yes)
0 = Remove/Bypass Overlay Filters (No)
Background Color #000000 Launches a native palette picker wrapper. Accepts valid standard Hex color values to set background overlay colors.
Background Color Opacity 0.5 Calculates transparency metrics for color overlays. Accepts decimal arrays from 0 (fully transparent) up to 1 (completely solid), using increment configuration steps of 0.1.
Content Width 90 Restricts the inner width percentage allocation for content wrappers holding text descriptions and company logos. Accepts integers.
Enable Logo 1 Radio switcher mapping company brand artwork asset rendering flags:
1 = Render Centered Brand Logo (Yes)
0 = Hide/Omit Logo Element (No)
Upload Logo — Core Media Manager image locator field used to assign and position a distinct corporate identity graphic within the module.
Logo Width 120 Enforces maximum horizontal pixel constraints on corporate logo files. Accepts integers. Vertical scales maintain native file aspect ratios automatically.
Enable Title 1 Radio switcher managing main heading display states over the scrolling scene:
1 = Display Header Title (Yes)
0 = Hide Title Element (No)
Title Section Title Text field input capturing string data to output as the main text heading layout overlay.
Title Color #ffffff Hex color controller mapping text color attributes to the main heading.
Title Size 36 Sets font size mapping for heading configurations in pixels. Accepts integers. Strips symbols natively.
Enable Subtitle 1 Radio switcher handling descriptive paragraph layer visibility states:
1 = Render Subtitle Canvas (Yes)
0 = Hide Subtitle Container (No)
Subtitle Pasted descriptive text… Deep textarea asset zone with an unrestricted input filter. Fully supports rich inline semantic structures, text strings, hyperlinks, structural tags, and standard tracking indicators safely.
Subtitle Color #ffffff Hex picker controlling body copy and text subtitle presentation layers.
Subtitle Size 22 Sets font sizing for body copy typography attributes in pixels. Accepts integer metrics.

Instance Boundary Layout Spacing (Outer Margin Arrays)

These parameters control physical outer buffer spacing layouts in pixels around the perimeter of the instance container block:

Option Parameter Default Value Operational Behavior Summary Descriptions
Margin Top 0 Applies external top separation bounds in pixels, shifting layout sections safely down away from preceding elements.
Margin Right 0 Controls external right boundary layout spacing offsets in pixels.
Margin Bottom 0 Sets external bottom buffer spacing variables in pixels to cleanly clear succeeding content trees.
Margin Left 0 Controls external left boundary layout spacing offsets in pixels.

Element Padding Matrix Controls (Inner Padding Arrays)

These fields manage inner spacing behaviors in pixels, defining whitespace bounds between module perimeter tracking boxes and inner components:

Option Parameter Default Value Operational Behavior Summary Descriptions
Padding Top 0 Applies internal top breathing space offsets in pixels above logo and header typography items.
Padding Right 0 Establishes right interior container buffer space boundaries in pixels.
Padding Bottom 0 Defines bottom internal spacing bounds in pixels below descriptive paragraph elements.
Padding Left 0 Establishes left interior container buffer space boundaries in pixels.

Advanced Optimization Settings Tab

Option Parameter Default Value Functional Core Behavior & Value Requirements
Alternative Layout Default Core alternative view template picker. Detects and applies alternative presentation layouts supplied natively inside active site template override mapping directories.
Module Class Suffix — String variable to append custom CSS selectors to the module wrapper block. Enables isolated targeting of single layouts for specialized custom styling properties.
Caching 1 Dropdown menu controller managing system data optimization caching strategies:
1 = Defer processing to Global Portal settings (Use Global)
0 = Force real-time presentation rebuild calculations (No Caching)
Cache Time 900 Determines system data cache life span boundaries in seconds before invalidation routines cycle. 900 equivalents match standard 15-minute intervals.

Joomla 6 Architectural Underpinnings

Parallax Scroll drops legacy structure logic entirely to integrate seamlessly with native Joomla 6 architectural conventions, ensuring zero rendering lags on live applications:

  • Namespaced PSR-4 Engine: Code routing flows map through the secure \LogicHunt\Module\ParallaxScroll namespace namespace arrays cleanly, avoiding collision loops.
  • Modern MVC Controller Dispatching: Module boot initialization lifecycle phases pass strictly through automated core Dispatcher abstractions and native system ServiceProvider registries.
  • Dynamic Hex-to-RGBA Translation: The companion ParallaxScrollHelper processor applies cryptographic validation filters to split standard Hex string color definitions, converting them into native CSS rgba() expressions on-the-fly to protect text readability scores under WCAG accessibility metrics.
  • Output Output Encoding: Layout outputs pass through modern core validation filters to prevent security issues on multi-user platforms.

Template Overrides

The extension follows strict update-safe Joomla template override rules, allowing developers to safely change presentation blocks and custom styles without modifying core files.

CSS Structural Styling Overrides

To inject specific custom responsive styling adjustments over default module outputs, build a custom style document using this exact naming convention inside your active theme directory:

templates/YOUR_ACTIVE_TEMPLATE/css/mod_parallax_scroll.css

HTML Layout View Overrides

  1. Log into your backend administrator control dashboard and go to System ➡️ Site Templates.
  2. Select your default system template link inside the structural listing summary panel to launch directory maps.
  3. Select the Create Overrides tab panel control options, find the Modules listing grouping, and click mod_parallax_scroll.
  4. The system builds an update-safe layout template duplicate file within your active structure folder path: templates/YOUR_ACTIVE_TEMPLATE/html/mod_parallax_scroll/default.php.
  5. Open and edit this file to reorder HTML elements, customize container markup, or modify inline structural tracking variables safely.

Troubleshooting

Background graphics fail to render or changes do not update on screen

  1. Go to System → Maintenance → Clear Cache, select the module registration boxes, and execute Delete All.
  2. Perform a hard browser cache rebuild task to bypass local caches using (Ctrl + F5 / Cmd + Shift + R).
  3. Verify that the Enable Background Image switcher parameter is set to Yes inside your active instance rules.
  4. Open your browser inspector tool panel and check the console logs to confirm that media files are uploading to correct server directories.

System exception crashes or layout warning parameters display after updating packages

  • This occurs due to procedural tracking traces from legacy versions remaining active. Navigate to System → Manage → Extensions and perform a complete uninstallation.
  • Manually delete any leftover directory structures under modules/mod_parallax_scroll/ via FTP/File Manager before re-uploading the package.
  • Confirm your runtime platform setup is running at least PHP 8.2 or 8.3 natively.

Typography contrasts over backgrounds do not meet accessibility thresholds

  • Open your module settings and confirm that Enable Background Color is set to Yes.
  • Darken your Hex values under the color configuration selector settings.
  • Increase your Background Color Opacity slider variable closer to 0.7 or 0.8 to add solid contrast weights underneath your text content areas.

Changelog

Version 2.0.0 Current Release

  • Implemented clean native namespaced PSR-4 module patterns, dropping outdated procedural dependencies.
  • Migrated routing flows into native system AbstractModuleDispatcher layouts and Service Provider containers.
  • Optimized core helper calculation models for PHP 8.2 and 8.3 runtime environments.
  • Updated core form toggle rendering components to use the standard Joomla switcher radio layouts.
  • Hardened core script properties against cross-site security variables across data elements.

Version 1.0.0 Legacy Baseline

  • Initial product architecture release offering baseline scrolling background controls.
  • Built custom administrative parameter form maps handling media selectors, titles, subtitles, and dimension values.
  • Integrated native Hex color string processing helpers to output responsive background container configurations.

Support

Faced with implementation roadblocks, layout override hurdles, or specific setup questions? Connect with our dedicated extension helpdesk engineers for direct expert support:

Copyright © 2014–2026 LogicHunt.
All rights reserved. Extensions distributed and licensed under the conditions of the GNU/GPL v3 license model.