Get Started

Easy Parallax is a powerful and elegant Joomla module that creates stunning parallax scrolling effects with background images. Perfect for hero sections, landing pages, and eye-catching content areas, this module adds depth and visual interest to your website through smooth parallax animations that respond to user scrolling.

Key Highlights:

• Full Joomla 4, 5 & 6 Compatibility
• Stunning Parallax Scrolling Effects
• Customizable Image Overlays
• Rich Content Integration
• Module Embedding Support
• Responsive Design
• Modern WebAssetManager Support
• jQuery 3.x/4.x Compatible

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package from your account.

System Requirements

• Joomla Version: 4.x, 5.x, or 6.x
• PHP Version: 8.0 or higher
• jQuery: Automatically loaded by Joomla (3.x/4.x compatible)

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4/5/6: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete. The module will appear in Content > Site Modules.

Enabling the Module

After installation, navigate to Extensions > Modules, search for "Easy Parallax", and click on it to enable and configure the module.

Access the module settings by navigating to Extensions > Modules, and find Easy Parallax in the list.

Image Settings

• Background Image: Select a background image for the parallax effect using Joomla's media manager. For best results, use an image with a larger height (taller than wide). Click the "Select" button to open the media manager and choose your image.
• Image Height: Set the height of the parallax section in pixels (e.g., 300px, 500px). This determines how much vertical space the parallax effect occupies. Default: 300px
• Parallax Speed Ratio: Control the parallax scrolling speed (0.0 to 1.0). Lower values (0.0-0.3) create a stronger parallax effect where the image moves slower than the scroll. Higher values (0.7-1.0) create a weaker effect. A value of 1.0 disables the parallax effect (image moves with scroll). Recommended: 0.3 to 0.7 for subtle effects. Default: 0.5
• Background Image Position: Control how the background image is positioned when the screen is resized. Options include: Left Top, Center Top, Right Top, Left Center, Center Center, Right Center, Left Bottom, Center Bottom, Right Bottom. 'Center Center' is recommended for responsive designs to keep the focal point of the image visible on tablets and smartphones. Default: Center Center
• Full Width Image: Enable to make the background image span the full width of the container. Disable to respect container width constraints. Default: Enabled

Overlay Settings

• Image Overlay: Enable to display a colored overlay on top of the background image. Useful for improving text readability and visual effects. Default: Enabled
• Overlay Color: Choose the color for the image overlay. This color will be applied with the specified opacity. Default: #333333 (dark gray)
• Overlay Opacity: Set the transparency level of the overlay (0.0 = fully transparent, 1.0 = fully opaque). Recommended: 0.3 to 0.7 for subtle effects. Default: 0.6

Content Configuration

• Text Color: Set the color for the text content displayed over the parallax image. Choose a color that contrasts well with your background image. Default: #ffffff (white)
• Content Maximum Width: Set the maximum width for the content container (e.g., 800px, 1200px). This helps maintain readability on larger screens. Default: 800px
• Content Padding: Add padding around the content area (e.g., 10px, 20px). This creates space between the content and the edges of the parallax section. Default: 10px

Module Embedding

• Enable Module Selection: Enable to show the module selection field. When disabled, the module selection field will be hidden and no module will be embedded. Default: Enabled
• Embed Module: Select another Joomla module to display within the parallax section. The selected module will be rendered above the custom content. This field only appears when "Enable Module Selection" is enabled.

Custom Content

• Custom Content: Add custom HTML content, text, or formatted content to display over the parallax background image. Use Joomla's rich text editor to format your content. This content will be centered vertically within the parallax section.

Advanced Configuration

• Smooth Scroll: Enable smooth scrolling to reduce flickering in Google Chrome and WebKit-based browsers. Recommended to keep enabled for better browser compatibility. Default: Enabled
• Enable Parallax on Mobile: Enable parallax effect on mobile devices (iOS and Android). By default, parallax is disabled on mobile for better performance and battery life. Enabling this may impact performance on older devices. Default: Disabled
• Custom CSS: Add custom CSS rules to further customize the appearance of the parallax module. These styles will be applied in addition to the default module styles. Useful for advanced styling and theme integration.

Module Assignment

• Module Position: Choose a position where you want the module to appear (e.g., position-7, hero, banner).
• Menu Assignment: Ensure the module is assigned to the desired menu items under the Menu Assignment tab.
• Module Status: Set the status to Published to make the module visible on the frontend.
• Access Level: Set the access level to control who can see the module (Public, Registered, Special, etc.).

Key Features

• Stunning Parallax Effects: Create captivating parallax scrolling effects with background images that move at different speeds as users scroll, adding depth and visual interest to your website. Powered by parallax.js (PixelCog) for optimal performance and compatibility.
• Flexible Image Control: Easily select background images using Joomla's media manager. Set custom heights and enable full-width display for maximum visual impact.
• Overlay Customization: Add customizable color overlays on top of background images to improve text readability and create sophisticated visual effects with adjustable opacity.
• Rich Content Integration: Add custom HTML content using Joomla's rich text editor or embed any other Joomla module within the parallax section.
• Content Styling: Customize text color, content width, and padding to ensure perfect readability and visual harmony with your design.
• Smooth Scroll Support: Enable smooth scrolling to reduce flickering in Chrome and WebKit browsers for a polished, professional experience.
• Custom CSS Integration: Add custom CSS rules to further customize the appearance and behavior of your parallax module for complete design control.
• Responsive Design: Fully responsive design that adapts beautifully to smartphones, tablets, and desktop screens with optimized touch interactions. Optional mobile parallax support for enhanced mobile experiences.
• Joomla 4, 5 & 6 Compatible: Full support for all modern Joomla versions with WebAssetManager for optimal performance and future-proof architecture.
• jQuery 3.x/4.x Ready: Updated JavaScript libraries compatible with the latest jQuery versions used in modern Joomla installations.
• Cross-Browser Compatible: Works perfectly across all modern browsers including Chrome, Firefox, Safari, Edge, and Opera.
• Enhanced Security: Built with security best practices including input sanitization and XSS prevention.

• What is the best image size for parallax effects?

  • For best results, use images with a larger height than width (portrait orientation). Recommended dimensions: 1920x1080px or larger. Taller images work better for parallax effects.

• How do I adjust the parallax speed?

  • Adjust the Parallax Speed Ratio in the Image Settings tab. The value ranges from 0.0 to 1.0. Lower values (0.0-0.3) create a stronger parallax effect where the image moves slower than the scroll. Higher values (0.7-1.0) create a weaker effect. A value of 1.0 disables the parallax effect. Recommended: 0.3 to 0.7 for subtle effects.

• Can I use multiple parallax modules on the same page?

  • Yes, you can use multiple Easy Parallax modules on the same page. Each module will work independently with its own settings and content.

• How do I improve text readability over images?

  • Enable the Image Overlay option and set an appropriate overlay color and opacity. Dark overlays with 0.5-0.7 opacity work well for light text. Light overlays work well for dark text.

• Can I embed other modules within the parallax section?

  • Yes, enable Enable Module Selection and select a module from the dropdown. The selected module will be displayed within the parallax section above your custom content.

• Why is the parallax effect not working?

  • Ensure jQuery is loaded on your site (Joomla 4+ includes jQuery by default). Check browser console for JavaScript errors. Verify that the module is published and assigned to the correct position. Make sure you have selected a background image.

• How do I customize the styling further?

  • Use the Custom CSS field in Advanced Settings to add your own CSS rules. You can also use the module class suffix (if available in your template) for targeted styling.

• Does the module work on mobile devices?

  • Yes, the module is fully responsive and works on all devices. By default, parallax is disabled on mobile devices (iOS and Android) for better performance and battery life - the module will display a static background image instead. You can enable parallax on mobile devices by turning on "Enable Parallax on Mobile" in Advanced Settings, though this may impact performance on older devices.

• Parallax Effect Not Working: Ensure jQuery is loaded on your site (Joomla 4+ includes jQuery by default). Check browser console for JavaScript errors. Verify that the module is published and assigned to the correct position. Make sure you have selected a background image.
• Image Not Displaying: Verify that the image path is correct and the image exists in the specified location. Check that the image is accessible via the media manager. Ensure the image file format is supported (JPG, PNG, GIF, WebP).
• Text Not Readable: Enable the Image Overlay option and adjust the overlay color and opacity. Use dark overlays with light text or light overlays with dark text. Increase overlay opacity for better text contrast.
• Content Not Centered: Check the Content Padding and Content Maximum Width settings. Ensure your custom CSS is not overriding the module's default styles. Use browser developer tools to inspect the element.
• Module Not Visible: Check that the module is published, assigned to the correct menu items or pages, and that the module position exists in your template. Verify module access levels match your user's access level.
• JavaScript Errors: Check browser console for errors. Ensure jQuery is loaded before the parallax scripts. Verify that all JavaScript files are loading correctly. Clear browser cache and Joomla cache.
• Styling Issues: Check if your template's CSS is overriding the module styles. Use browser developer tools to inspect elements. Add custom CSS via the Custom CSS field or your template's custom CSS file.
• Smooth Scroll Not Working: Ensure Smooth Scroll is enabled in Advanced Settings. Check browser compatibility (works best in Chrome and WebKit browsers). Verify that SmoothScroll.js is loading correctly.
• Image Not Visible on Mobile: By default, parallax is disabled on mobile devices and uses a static background image. If you've enabled "Enable Parallax on Mobile" and the image is not showing, check that the image path is correct and the module is published. Clear browser cache and test again.
• Overlay Not Visible: Ensure the Image Overlay option is enabled. Check that the overlay color and opacity are set correctly. Verify that the overlay z-index is not being overridden by custom CSS.