Banner3D Parallax

ModulePic 01

NOW... Joomla 3.x Ready!

New from GraphicAholic, Banner3D Parallax effects module for Joomla 1.5, 2.5 & 3.x. Create stunning eye catching Parallax modules in a simple and easy way that does not require an advanced degree in Computer Science to use! Banner3D Parallax allows you to animate two images (background & foreground) along with custom HTML text in a very customizable easy to understand Joomla module. Gone are the days of having to pay someone to create a Parallax effect for your site or even worse, paying for an extension that is just too complicated to set-up. Banner3D Parallax is FREE to use and EASY to set-up by following some basic pre-launch instructions. Banner3D Parallax uses the power of the jQuery Library Script, a super light weight supporting jQuery script and some basic code as its backbone. From here, the rest is left up to your imagination and graphic skills!

Banner3D Parallax has been tested to be compatible with IE8+, FireFox, Chrome and Safari browsers. It uses the jQuery ‘no-conflict’ mode allowing you to have as many Banner3D Parallax modules on a single Joomla page as you need while still playing nice with other jQuery or Java scripts.


Banner3D Parallax by GraphicAholic is a licensed GPL module for Joomla. You are encouraged to use and enjoy it, modify the code however you wish or just delete it because it was too easy to set-up and use (muttering to yourself... "nothing this easy can be any good"). Banner3D Parallax comes 'as-is' and offers a lifetime money back guarantee! It is another 'FREE' Joomla extension from GraphicAholic.



Install module using native Joomla installation adjust settings, do not display title, select a module position, assign to your menus and enable/publish. This module is driven by the jQuery Library script and demands that the script be loaded to function. I have provided a Load jQuery as an option (default set to 'No') that you may or may not need to set based on your Joomla site's configuration or installed extensions (Joomla 1.5 & 2.5 only).

Pre-Launch Instructions

Before diving into using this module, there are a few basic 'Pre-Launch' instructions you'll want to plan for. The first is knowing what module width you plan on using. Armed with this knowledge, now it's time to create your images. All images you create should be at least 200px longer (wider) then the actual module width you are going to use. By creating longer (wider) images then your module width will allow your finished images to slide left/right based on the mouse movement. If you experiement with different widths, you'll get different results. Finally, when creating background images I'd strongly suggest using the JPG image format. Because it is the 'background' you do not need it to be transparent. This will reduce this image size quite a lot and give your users a much faster page load.


  • Load jQuery? By default we have this option set to No. If you do not have another application calling up the jQuery Library, change this setting to Yes (Joomla 1.5 & 2.5 only).
  • Module width: This setting will be the actual width this module will take up on your Joomla page. You can use a fixed pixel value, percentage value or type in the word ' auto ' to fill the entire module width space.
  • Module height: This setting will be the actual height this module will take up on your Joomla page.
  • Banner3D link: Set the hyperlink you wish to use for your Banner3D Parallax.
  • Banner3D Alt.title: Set the Atl. title. This is optional but it allows Banner3D Parallax to be in compliance with ADA.
  • Link Behaviour: Set how you wish your hyperlinks to react when clicked.
  • Background image: Drop-down list will show what images are available to use for your background image.
  • Foreground image: Drop-down list will show what images are available to use for your foreground image. PLEASE NOTE: By default, all images you wish to use within Banner3D Parallax must be loaded into the 'images/banner3d' folder. This folder is automatically created on module installation. If your working this module and uploaded images into the 'images/banner3d' folder, you’ll need to refresh your module admin page before your new images will show in the drop-downs.
  • Your image width: This setting is what makes Banner3D Parallax work! When designing your images, create your foreground & background images at least 200px wider then the actual module width. This will allow your image(s) to slide left/right with your mouse movement. (See Tips & Tricks for some additional effects this setting can give you.)
  • Animate background image: Setting this option to No will keep your background image static.
  • Animate custom HTML text: Setting this option to No will keep your custom HTML text static.
  • Left content margin: This option will set where your custom HTML text will start.Text color: Set this option in HEX to define the color of your custom HTML text.
  • Custom HTML code: Have fun with this option! Play by the HTML code rules and get creative… (See the Tips & Tricks tab to extend this feature.)


Tips & Tricks

Coming soon...


I have included within this installation two (2) images (background.jpg & foreground.png) to get you started. Path to these images;


SUPPORTED BROWSERS: IE7+, FireFox, Safari, Chrome