Adding a parallax background to pages

#1

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.

Here is the source:

and here is example page:
http://pixelcog.github.io/parallax.js/

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!

#2

Parallax is a great idea @jdloudon - have you a link of what you are trying so far? It might be a jQuery clash with something else of your page.

This would definitely make a good plugin/tag :slight_smile:

#3

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.

https://www.piratesofthecarabina.org.uk/test1

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!

#4

Pretty awesome work @jdloudon nice one :slight_smile:

(just a side note… I assume you are installing the SSL currently as it came up with an error)

closed #5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.