Using Parallax effect

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

Quote:

---

Originally Posted by corrie

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

---

https://github.com/ryanmitchell/MooParallax

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

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! :oops: I've searched everywhere for tutorials but most tutorials assume a good knowledge of Contao and web coding already.

Any help greatly appreciated
C

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:
  
  Code:

  ---

  <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!):
  
  Code:

  ---

  <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]

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

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

xchs you are a legend - thank you :D

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?

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

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.