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="Fezzano bay in a sunny day"}

Fezzano 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 #27 Pawel 2015-02-21 21:48
Hey Marco,

Would you be so kind and share some work instruction for dummies on hot to use it in Joomla 3.x?
I tried several ways but it never appears. I am sure that not only me would appreciate it.
Best Regards
Pawel
Citazione
0 #26 Diabolka 2015-01-05 21:06
Is there a way to make text/headers float above the parallax when you are scrolling instead of having the caption below?

===Answer

hi,
you can put the text over the image using css positioning, but this is not, as told, a real parallax: if you want the text to float over images, and text scrolling at different speed, you need to code a javascript program.
Citazione
0 #25 Da Webmasta 2015-01-04 11:07
I love this plugin, but I notice that the parallax works not good with Internet Explorer. Problem is that Chrome and IE have a really NOT smooth scroll.. Especially when you scroll with the mouse wheel. So when you use the mouse wheel to scroll, the parallax effect is completely ruined. In Firefox instead the scroll is continous even when scrolling with the mouse wheel. Is there a way to have continous scrolling in IE and Chrome too? There are sites who work well on IE like www.rendezvousroma.it/ but the developper did some workaround which you can find here: stackoverflow.com/.../... Can this work with Joomla?

===Answer
hi Webmasta,
sorry, this is a browser related problem: you can solve it using a jquery library,l but you have to refer to library's author, anyway I suppose it should work also with joomla.
this plugin works only on css to avoid any javascript conflict.

bye,
marco
Citazione
0 #24 Fuquan 2014-12-23 12:33
Hi Marco,

Quick two question, 1) Does this work on a test (WAMP) llocal machine or does it have to be on the web? 2)the actual code below where are we supposed to put it? Is that in an article or should we create a custom HTML module? Using the code structure below in an article it seems not to be working as no picture loads. I have tried using a path (using the windows path structure as well) but no luck getting the image to show.

Any help would be appreciated.
Thanks Fuquan

===Answer
Hi Fuquan.
two quick answers ;)

1) yes, it works also on a local wamp
2) you can put the code in an article or in a custom html module, as you prefer (in a module you have to enable plugin processing for module, of course)

you can use ff/chrome code inspector and check carefully the path, I suppose here is the trouble.

bye,
marco


{marcoparallaxb ground image="" caption="" height="" cssid=""}
Citazione
0 #23 juan 2014-12-04 18:00
Citazione juan:
Hi, is there any way to make the background responsive? everything works great but on a mobile the image looks too big...!


I think I got it, but if you can clean it up and explain to me how it worked, I´ll forever thank you...
added this to the additional CSS styles option:
in case the code is cleaned:

codepen.io/anon/pen/sGvxe

===Answer
You should not use this plugin on mobile layout (hide it), anyway you can resize the viewport by using media queries.

ps: I don't understand your code, that is only a page background...

bye,
marco
Citazione
0 #22 juan 2014-12-04 16:59
Hi, is there any way to make the background responsive? everything works great but on a mobile the image looks too big, doesn't stretch as it does when you shrink the window on a PC.


thanks for a great plugin!
Citazione
0 #21 Tiago 2014-12-04 12:07
Citazione Tiago:
Citazione Tiago:
hi
thx for plugin but im use
{marcoparallaxb ground image="teste.jpg" caption="" height="200" cssid=""} does not show the image, but a black stripe
prepare content is on

use jJoomla! 3.3.6 Stable

===Answer
Hi Tiago,
usually a black stripe is a wrong path to image: check it, and check also css.

bye,
marco


thank your tip worked 100% problem in css
Citazione
0 #20 Tiago 2014-12-03 13:59
Citazione Tiago:
hi
thx for plugin but im use
{marcoparallaxb ground image="teste.jpg" caption="" height="200" cssid=""} does not show the image, but a black stripe
prepare content is on

use jJoomla! 3.3.6 Stable

===Answer
Hi Tiago,
usually a black stripe is a wrong path to image: check it, and check also css.

bye,
marco
Citazione
0 #19 Tiago 2014-12-03 13:57
hi
thx for plugin but im use
{marcoparallaxb ground image="teste.jp g" caption="" height="200" cssid=""} does not show the image, but a black stripe
prepare content is on
Citazione
0 #18 Sal 2014-12-02 02:22
====Reply

That was my first though as well; however, shrinking the file down further didn't help the issue. :(

===Answer
Hi Sal,
it's difficult to understand what's going wrong on an unknown system!
. too many files per page (css, js, images)?
. troubles with network?
. gremlins?
try to inspect communications between browser and server (you can also use a browser's tool)

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

L'estate si avvicina hai già trovato l'albergo per le vacanze? cerca un albergo al mare o un hotel in montagna ove trascorrere le tue vacanze.