Using 5.2.2 and a slightly modified theme based on the default. I am trying to add a parallax bg scrolling effect and although I have found what looks like a simple solution I cannot get it to work within my template.
So I have downloaded and installed the js into my new theme /js folder and added this to layout.php:
and this at bottom of page:
<script type=“text/javascript”> $(document).ready(function (e) { if($(’.parallax-window’).length){ $(’.parallax-window’).parallax(); } }); </script>
So what needs to be done is to add this to my page:
div class=“parallax-window” data-parallax=“scroll” data-image-src=“image/background.jpg”
but wherever I put it, nothing happens. Any ideas?
It would be a great option to add this into the system!
Hi, I have an initial version up and running. It did not work right away as the template file and associated js and css was not being run. Now that filepath problem is solved, I have a page working of sorts.
The idea is for those not familiar: the page scrolls as you would expect, but the background image also does, but as a slower speed, hence parallax name.
I have to experiment with different size images, and adding extra ones but it is working within a standard template.
At first I tried with just CSS and it was a bit messy. Then I found this that just uses a little bit of Javascript and jquery. The article I linked to explains it quite well. I am sure there would be an easy way ti deploy this as a Pulse tag if anyone cares to have a go!
