Using parallax with a modular template

Support Themes & Styling
1

So I’ve been trying to get a parallax plugin to work with my site which is based on thew one page site skeleton and I’m having some really weird issues, and I’m wondering if anyone has ever built in a parallax effect in Grav before. I’m using a jQuery plugin that I have used in the past: http://pixelcog.github.io/parallax.js/ which I know works, and it works with the jquery that’s used by Grav (2.x.min) but for whatever reason I can’t get the image to display. The plugin doesn’t need any weird CSS, and the space for the image is there, but no image.

I can get the image to display in the twig template if I add it directly using an image tag or by making it the background of a div, but not using the code for the plugin. I don’t get any javascript errors in the console, I know the path to the image is correct, the javascript file is loading, but it just doesn’t work.

I’m not asking for anyone to debug my code, I’m just curious is anyone has built a one page Grav site with parallax and what you might have used.

2

If you added the init via “addInlineJS” in the modular template, ensure that the page (the modular content itself, not the page containing the modulars) has set “cache_enable: false” in the header.

3

oooh. That’s a good tip thanks. I just worked it out too.

So, since the parallax image is “behind” the content, what it turned out to be was the slidebars wrapper and the #body wrapper needed the background to be transparent. I ended up removing the slidebars bits altogether since it’s just a one page site, I don’t really need the hamburger nav to show up on mobile.

What was really throwing me off though was that there just wasn’t any errors to give any clues, so I just removed all of the stylesheets and added them one by one back in until it stopped working again.

4

better than disabling the cache completely, you should use: never_cache_twig: true : https://learn.getgrav.org/content/headers#never-cache-twig

5

I meant just to set the header in the modulars using addInlineJs.