Marco's parallax background scroller for Joomla!

Parallax background scrollerThis 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"}

Tellaro bay in a sunny day

the joomla logo 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"}

 

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. 

Commenti   

0 #38 Robert G Mears 2018-09-08 12:34
HI Marco. Thanks for this plugin. It worked great until a recent update to Joomla's core files. Now the background image repeats. I cannot find where the second image comes from. For example:
j-tutor.studiofive.biz/.../...
Citazione
0 #37 Olivier 2018-06-20 13:42
Hello,

For some years i've used your plugin in both my websites perfectly. Thank you for it and the nice work!
But yesterday it appeared that on both, the plugin was handled differently.. and poorly. On one of my websites, I could correct the black stripe problem, but my second website is acting strangely around it : there is this black stripe but still my background image appears under the stripe when I scroll down, and the more I scroll, the faster it goes down the page and disappears. then ,only the stripe remains. and this happens ONLY in Chrome. FF works fine.
I have no idea how to go around it, with my little knowledge of coding. Could you help me?
here is a sample link, but it is repeated on all articles where I use your plugin.
kronoscopia.com/.../...

thx for your help

Olivier
Citazione
-2 #36 ramses 2017-07-19 22:05
How can I put a button over the image?
Citazione
+3 #35 massy 2017-01-18 12:05
hi, i installed the plugin, anabled the plugin..
in hompage i published a custom module with the code
{marcoparallaxbground image="cover.jpg"}

the only thing that i see is the code... where i'm wrong?

tnx for your help
Citazione
0 #34 Lukasz 2016-06-19 10:54
Hi !

It almost works! But there is a problem, he takes to much into the code and the result is:

style="backgrou nd-image: url('/images/="02.jpg"')"
should be: style="backgrou nd-image: url('/images/02.jpg')"
(he takes = and "" to the code)

It works only when I set up the default image path"images/02. jpg" and with that default image it is sufficient to put into the content: {marcoparallaxb ground} but then I have only one parallax picture in whole CMS

I have also a problem with putting it into the module "Own HTML" - does it work only in the content (in the articles) not in the modules like "wrapper / own HTML code"?

Thanks,
Lukasz

===Answer
Hi Lukasz,
1. strange code, see the output in this page: it's correct! I suppose you made a mistake inserting code and I think also you are looking at the inspector's code and not at the source

2. see this page: you have two parrallax, with the placeholders above.

3. you forgot to enable plugin processing on the module

bye,
marco
Citazione
0 #33 v s punn 2016-04-04 06:07
I need to display the background on all the pages of the website.
Do I need to add the plugin code to all pages, or is there any way to show on the complete web site.

===Answer
Hi punn,
you can use a custom html module published on all pages.

bye,
marco
Citazione
0 #32 Peter 2016-02-13 22:47
Hi marco,

i use a artisteer-templ ate and it will not work to fill the hole
screen width with the jpg. I tryed out the position: relative and overflow: hidden to remove from the css without success.
This is my template:XXXXXXXXXX

Can you help me?

Peter

===Answer
Hi Peter,
if your site is on line, may be I can help.
for sure you are a honest one, but, really, I should install untrusted php code on my server?

bye,
marco
Citazione
0 #31 marissa 2015-10-06 11:13
I have enabled the plug in, I have written the code in a custom HTML module and I check the prepare content in options of the custom module.
But In the site it's just shown up the code with the image as highlighter behind it.
I am using Joomla 3.4, Chrome browser, Wamp server and the protostar template. Unfortunately, my site is in local host, so I cannot uploaded.

Can you please explain me if there is anything I can do?
Thank you very much

===Answer
Hi marissa,
did you check the source of the html code?
the setup seems ok, so I suppose there are extra characters in the plugin's placeholder.

let me know if it solves.

bye,
marco
Citazione
0 #30 marissa 2015-10-02 11:12
Hi,
I download the plugin but I cannot understand how to activate it.
I put an image path and an image name in the fields, but it doesn t shows anything in the homepage.
I use the protostar template in joomla.

===Answer
activate it like any other plugin ;)
check the source of the site's page searching for plugin output (it works, may be a css trouble) or {marcoparallaxb ground ...} placeholder (not enabled or not supported).
bye
Citazione
0 #29 roevka 2015-09-17 13:40
Hi thank you for the plugin. But I do not understand why the background is iný page width.

Can you tell me how?
Thanks.

====== Answer
Hi roevka,
did you mean that the background image doesn't cover the full width of the screen?
this is, usually, a css related issue, may be a "position:relat i ve" or "overflow:hidde n" into one of the containers of the image (div, body, ...)

ps: sorry for the delay :( , but your mail is wrong!!

bye,
marco
Citazione

Aggiungi commento

Please note: URL in text are not linked and user's site address is only for internal use and is not published.

Comments are human checked. All spam will be removed, so don't waste your time and, especially, mine!

Codice di sicurezza
Aggiorna