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 #7 Ajithkumar 2014-07-12 04:40
== Hey Marco...
It works fine .. Thanks for your good response..

Cheers..!!
Ajith
Citazione
+1 #6 Ajithkumar 2014-07-11 06:00
I got only 280px height with black bg and caption ...
There are 3 option to insert the images
1.In plugin Configuration
2.In prepare Contant
3.In custom html which is given manualy..

what i have to use to set image?? I juz confused..Plz Help..

===Answer
Hi Ajithkumar,
you can use the configuration you prefer, the easiest way is:

1. suppose your background is myimage.jpg
2. upload it in default /images directory using Media Manager
3. insert /images/myimage .jpg in image parameter value

like this:

{marcoparallaxbground image="/images/myimage .jpg" caption="my image"}

bye,
marco
Citazione
0 #5 Webtotal 2014-06-30 16:59
Here's the code I write:

{marcoparallaxb ground image="image01marinelamy.jpg"}

As a custom HTML module displays the same text on the screen, and as article shows nothing.

The plugin is already activated.

Surely I must be doing something wrong. What can it be?

I tried with several templates.

==== Answer
Hi Jimmy:
1. check you have enabled the option 'Prepare Content' in the HTML custom module
2. check the rendered html code in article page and ensure it's not a css conflict.

bye,
marco
Citazione
0 #4 Francesco 2014-05-24 21:37
Buonasera Marco.
Ho appena scaricato il plugin e lo proverò nei prossimi giorni.
Solo una domanda: c'è il modo di inserire del testo SOPRA le immagini in background?
Es: vorrei usare un'immagine e scriverci sopra il titolo della sezione che segue.
Ovviamente vorrei che il titolo fosse testo, non immagine...
Grazie
Francesco

=== Risposta
ciao francesco,
perché il testo stia sopra è necessario modificare il codice php/html ed il css

buona serata,
marco
Citazione
0 #3 Adrián 2014-05-19 16:27
Hello, Im not able to make the plugin work, im using joomla 3.3 and when y type the code:

{marcoparallaxbground image="/images/ example.jpg" caption="Hello"}

The page displays the texts as I typed in the plain text editor

The plugin is already enabled, and im using the basic plain text editor in order to avoid hidden html tags,

I inserted and example url in the website field.

Is there any other configuration Im missing?

Thanks and regards

Adrián

=== answer
something wrong in/with the template choosen: solved by changing the template.
under investigation

bye
Citazione
0 #2 Pedro Ferreira 2014-05-07 19:19
Ciao Marco,

I just showed off all my italian :) I am a pretty noob in web developing, and this explains why I am not being able to get your code to stick to the html file that I am editing on Joomla. I am pretty confused about how to implement this and where to attach the code you have shared above. I tried to use it as an attribute of a div, as a tag itself and nothing worked. Could you please share some sample code, or explain as you would for a 5-year old?

Thank you a lot, and I apologize for this embarassing nooby level. I would like to ask you please to answer as soon as possible as I am really under a deadline here.

Kind regards,
Pedro Ferreira
===Answer
there was something strange in joomla 'custom html' module record lock...
Citazione
0 #1 Martin Kowalewski 2014-04-07 15:29
Hey Marco!

Love your plugin, it does ALMOST everything I need for my site. My question is: How can I achieve the 100% width look you have on this demo site? If I apply the plugin to one of my sites the image only streches to the width of the container. I guess I'm missing something.

Thank you very much in advance for any help and thanks for that awesome plugin! :)

Martin

===Answer
(Note: Martin uses JA Purity III template)
Hi Martin,
the problem is the 'position: relative' in 'col-xs-12' css class.
I think you can safely remove it, but you have to test the solution especially on mobiles devices.

bye,
marco
Citazione

Aggiungi commento

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

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

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.