ParallaxScroll Module Setup

To install The ParallaxScroll module, go to your joomla setup backend at:
http://www.yoursite.com/administrator
Login as a superadministrator and go to the extensions installer page:
http://www.yoursite.com/administrator/index.php?option=com_installer
This to use this plugin with your own images, you must be comfortable with basic infographic tasks such as resizing and cutting out pictures.

Joomla Installer

Select the extension archive file (mod_parallaxscroll.zip) and click the 'Upload & Install' Button.
The extension will be installed and listed in the Extensions -> Modules page at:
http://www.yoursite.com/administrator/index.php?option=com_modules

Here is the kind of result you can expect:

ParallaxScroll Module launched !
Get it 

Advanced (up to) 6 layers ParallaxScroll module with Scale & Rotation effects, force full width and embed new module position. Multiple instances supported on same page.



Here are the parameters and how to set these up.
Basically , you need to give informations to the script about module size, position on the page (height), background image, and foreground images with or without effects.


Field: Width
Description: The width for the module. In pixel (px) or Percentage (%). If you set 100%, the module will use the whole space in its module position.

Field: Height
Description: This is the module height, it can only be in pixels so you must not add px to the value you set.

Field: Height from page top
Description: As we don't want the script to run when the module is not visible, we specifiy here the distance in pixels between the very top of the page and the top of the module.

Field: Parallax Background: This is the Background image, it is recommended to be a large jpeg image (especially if you set the module in a full screen width module position. We then recommend to have a 2000x1000 jpeg to support largest screen resolutions.
[Beta feature]This field also supports MP4 video for a HTML5 video as parallax background. Inthis case. Set here the path to the mp4 file and add, in the same folder, with the same name the .ogg, .webm and .jpg files for the video to be supported on varous browsers and to be replaced by a jpeg on mobile devices. 

Now we have 5 times a set of settings related to each 5 layers images we can add

Field: Parallax image 1(to 5): Enter here the relative path to a transparent PNG file. The module img folder has 2 example images (image1.png and image2.png). Note that Parallax image 2 will look closer than (on top of) Parallax image 1.

Enable various Transform options:
Scale - Rotate - TranslateX - translateY
  • Scale: Zoom in or out
  • Rotate: clockwise or anticlockwise
  • TranslateX: move left or right
  • TranslateY: move up or down

Field: Force Full Width:
 Parallax effects have a better rendering look when set on full width, but most module positions in templates are not fullwidth. This feature here, when enbled, uses jQuery to alter your template layout to set the containing DIV to full width.

Field: Include jQuery: As usual if jQuery is allready loaded by another extension or by your template, you should disable the option here. Also if you set multiple instances of this ParallaxScroll module on one page, only the first one should load jQuery. Note that if jQuery 1.8.1 or newer is required (The one provided with the module is jQuery 1.10.2)

Field: Include modernizr.js: Same as jQuery, you need this only once on the page, so if you use multiple instances of the module, only enable modernizr in the first instance.

Field: New module position: You can embed a new module position inside the parallax. Nice way to add text, links etc... Just add a new position name and create a new module and set it to that new module position.

As an example, here is a screenshot of the settings used on one of the demo modules:



Buy - Demo - Forum
  • Created on .
  • Last updated on .
Disclaimer: Nordmograph is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.
Copyright © 2020 Nordmograph - Joomla extensions. All Rights Reserved.
Joomla! is Free Software released under the GNU General Public License.
Browser of the future