This is a nice background scrolling effect with a simulation of a pseudo parallax effect. You can insert one or more image in your articles and define an horizontal stripe (view port) to see the images as they was really a landscape through a window. See this plugin in action!
A plugin for parallax background scrolling in Joomla!
Features
- Easy to use and configure
- CSS3 and responsive
- plugin works on J2.5 and J3.x sites;
This extension is also published on http://extensions.joomla.org, if you like, it vote it or write a review, thank you.
Kwown bugs
Does not works on all IOS devices.
Does not works on some Android devices (works on FF, but not on default Android 2.x browser or Dolphin).
This is not a bug, really, it's the not compliant support for CSS3 in these devices.
{marcoparallaxbground height="280" image="marco-parallax-fezzano.jpg" caption="Tellaro bay in a sunny day"}
{marcoparallaxbground height="280" image="marco-parallax-fezzano.jpg" caption="Tellaro bay in a sunny day"}
Plugin Configuration
Simply download the plugin, install it and activate it:
- Default image path
Insert default image path, from site root, for relative path in image name. Starting and trailing slashes are required; - Default image
Insert the default image name. You can use relative/absolute path or full URL of background image (see later); - Image Caption
Enter text for the default image caption (if any); - Height of image
Height of image on background. image should be almost 2 times the viewport; - Load css
load default css styles; - css ID for container
Set a css ID; left blank for auto ID; - Additional css styles
Insert css rules for plugins (Load css must be enabled );
You can use the Additional css styles text area to insert specific css instruction for the pages with the scroll effect. now I used:
body{ overflow-x: hidden; }
aside{ position: relative; z-index: 10; }
.mmlImageInfoWrap{ text-align: right; padding: 5px; }
to avoid the horizontal scroll bar due the image and to let the menu float over image and for padding caption.
{marcoparallaxbground image="marco-parallax-laral.jpg"}
{marcoparallaxbground image="marco-parallax-laral.jpg" cssid="Laral"}
Plugin Parameters
Of course there is the remote possibility that you do not want the same image on each page. This is the reason why you can insert the plugin and specify the parameters:
Note: emphasis <em> in plugin code example is only to avoid plugin activation, you have to insert it as standard plain text!
Use: {marcoparallaxbground image="" caption="" height="" cssid=""}
- image
Insert the default image name. You can use relative/absolute path or full URL of background image.
- if Image name strats with 'http' it is supposed to be an URL;
- if Image name strats with '/' it is supposed to be an absolute path from site root;
- otherwise it is supposed to be a relative path from the 'Default image path';
- caption
Enter text for the image caption; - height
Height of image on background. image should be almost 2 times the viewport; - cssid
css ID for container if you need a site unique css id, left blank for auto ID.
All attributes override are optional.
Download J2.5 and J3.x version
This extension is also published on http://extensions.joomla.org, if you like, it vote it or write a review, thank you.