Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Using parallax with a modular template

Started by Darryll DeCoster 9 years ago · 4 replies · 1830 views
9 years ago

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.

9 years ago

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.

last edited 08/21/17 by Chris Jung
9 years ago

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.

9 years ago

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

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 90 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 449 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 43 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 123 3 months ago