Using Parallax effect

[corrie]

Hi,
I really want to use a parallax effect on one of my pages (like this:http://stephband.info/jparallax/)

Has anyone used this or know if it's possible?

I heard there was a Mootool called mParallax but I can't find it anywhere.

If I just followed the tutorial on the link, where do I put the javascript?

Thanks for any advice
Corrie

[xchs]

I heard there was a Mootool called mParallax but I can't find it anywhere.

https://github.com/ryanmitchell/MooParallax

[corrie]

Awesome, thank you! If i get it working i'll post a link :D

[corrie]

OK, so i'm a total newbie to both Contao and web coding so I really need some help...
I downloaded the mooparallax link so I've got a 'MooParallax.js' file,
Where do I put this in contao? Do I upload it? create a template? not a clue!

Sorry to be such a dunce! ops: I've searched everywhere for tutorials but most tutorials assume a good knowledge of Contao and web coding already.

Any help greatly appreciated
C

[xchs]

Haven't used the script/plugin until now but it should work something like this (not tested though!):

• upload the JavaScript file "MooParallax.js" to your webspace and put it somewhere in your files directory (e.g. [TL_ROOT]/tl_files/js/MooParallax/MooParallax.js, where "[TL_ROOT]" is the Contao root/main directory)
  
  [/*:m:2ngoqlpf]
• create a new template file "[TL_ROOT]/templates/moo_parallax.html5" (if the "Output format" is set to "HTML" in your "Page layout") and/or a template "[TL_ROOT]/templates/moo_parallax.xhtml" (if the "Output format" is set either to "XHTML Strict" or "XHTML Transitional")
  
  [/*:m:2ngoqlpf]
• edit the template "[TL_ROOT]/templates/moo_parallax.html5" (for instance) and put the following code in there:
  

  <script src="<?php echo TL_FILES_URL; ?>tl_files/js/MooParallax/MooParallax.js"></script>
  <script>
  (function($) {
    window.addEvent('domready', function() {
      new MooParallax($(document.body).getElements('.parallax'));
    });
  })(document.id);
  </script>

  [/*:m:2ngoqlpf]
• add a new content element of type "HTML" and put there your HTML markup (take care for the right image paths and image dimensions!):
  

  <div class="parallax">
     [img]tl_files/images/parallax_drops/0.png[/img]
     [img]tl_files/images/parallax_drops/1.png[/img]
     [img]tl_files/images/parallax_drops/2.png[/img]
     [img]tl_files/images/parallax_drops/3.png[/img]
     [img]tl_files/images/parallax_drops/4.png[/img]
     [img]tl_files/images/parallax_drops/5.png[/img]
     [img]tl_files/images/parallax_drops/6.png[/img]
  </div>

  Of course, instead of a content element you can create a new front end module of type "Custom HTML" as well.
  
  [/*:m:2ngoqlpf]
• activate the new MooTools template in your "Page layout" by clicking on the corresponding checkbox "moo_parallax"[/*:m:2ngoqlpf]

[corrie]

Thank you so much for taking the time to write all that for me, looks like that makes sense, I'll give it a go.

Thanks again :D

[xchs]

I have tested it now - works like a charm so far. You can download the ressources HERE.

[corrie]

xchs you are a legend - thank you :D

[corrie]

ha ha, now to work out how to use this effect on touchscreens!!
Could I replace the hover effect with touch & drag and clicks with double clicks/taps?

[xchs]

Not sure if it is really a good idea to run such scripts even on mobile devices since they are usually quite performance heavy.

[Ruud]

In fact, as long as there is no mouse pointer, there will be no movement to base the position of the layers on. This effect is mute on most mobile devices.