Parallax PRO Manual
Parallax PRO Manual for Joomla 1.5.23, 1.6, 1.7 and Joomla 2.5
The basic options are simple.
You have the possibility to enable or disable the plugin and select the Template Options. The Template Options define if the Template Style 1 will be enabled for all Joomla Template Styles or only for the selected Joomla Template Style in the Template Style 1 Parameters.
You now have the possibility to define up to 3 Template Styles within the Parallax Parameters. This setup is the one we use on our demo for the vertical parallax background scrolling.
Template Style 1
The first option is the possibility to enable or disable the Template Style.
Next is the selection for the Joomla Template Style (for our demo website we have different template styles depending on the extension to be presented).
The Scrolling Element defines which scroll event handler should be used. Default is "window" but you can use any other (div) element.
The Scroll Direction tells the extension in which direction the page scrolls. For this demo we have it scrolling vertical as we will also scroll our backgrounds in up or down. But for sure you can create some funny setups like a vertical scrolling page with horizontal scrolling backgrounds.
Next comes the Wrapper what is the element that holds your scrolling content in case
there is one. As we use the window scroll event we don't need it here.
With the Button Class you can define the class your scroll buttons have if you use manual scroll buttons.
The next part is the images setup for your parallax background. We have 3 images / layers defined here.
The first image is the fdpimage1.png which is the sky background. Scroll Direction is set to "up" so the image will scroll up as the page is scrolled down. Flip image is set to no as we don't want to flip it when scrolling up. The Flip Image offset is left as 0 as we don't flip the image. Ignore Size is set to "No" as we want the image to be scrolled fitting to the screen. Setting this to Yes the image would scroll out of the screen. Scale image is set to "Yes" as we want the image to be scaled to fit the screen (width as we scroll vertical here).
The second image is set to the birds image with scrolling to right. So the birds will scroll right as you scroll down the page and reverse. he Flip image option is set to yes as we want the birds to fly back as the page is scrolled up and the offset is set to 747px to simulate the birds turning at the specific point. Ignore Size is set to "Yes" so the birds will fly out of the screen and scale image is set to "No" as we don't want the birds to be scaled in that case.
The third image is the temple with the same settings as the first image.
This image set is included as a sample, so you can see more clearly how things do work.
Template Style 2
The Template Style 3 in this example is a horizontal scrolling set up with manual scrolling.
So the Scrolling Element is set to "floater" which is the outer div around the scrolling content with a css class that defines the overflow: hidden; to show no scrollbars.
Scroll Direction is seth to "horizontal".
The Wrapper is set to "floatwrapper" which is the div inside the floater div that holds the content and has a large width. 2250px in this case which is 3 times the content's width.
The Button Class is set to ".fdfloatbtn" so all elements with this class an event handler will be attached to that scroll to the element that is set up in these button elements title. We use span elements here, so the code for them is
The first image is set to "parkback.jpg", scrolling to right, no flipping, and the image scaling is set to "Yes".
The second image is the parkfront.jpg with the same setup as the first image.
That's it .. wasn't too difficult I guess.
So the complete article for our horizontal parallax scrolling looks like this:
