Make parallax work on Quark

1

Brand new to Grav and playing around the Quark theme.

The parallax scrolling does not work at all. The ‘hero’ just scrolls up in normal, regular fashion.

The hero.md file has:

title: ‘Homepage Hero’
menu: Top
hero_classes: ‘parallax text-light’
hero_image: header.jpg

What am I missing?

Thanks.

2

try removing the ’ from the classes.

hero_classes: parallax text-light

3

Thanks, but removing the ’ made no difference.

4

Does everything else look right on the site other than the CSS for the parallax is not working?
Your front matter text looks like mine other than the ‘parallax text-light’ I have just parallax text-light

On the hero.md page:
Normal / Advanced make sure template is Hero.
Normal / Advanced / Hero / Hero Classes - This is what adds the classes to the front matter header. Try removing what is there, saving and typing parallax text-light and saving again.

I had an issue on the home page where the text was wrong and had an error that I had to fix. Not sure if we are using the same theme but this is my modular.md ( home page )

title: ‘One Page Demo Site’
menu: Home
onpage_menu: true
body_classes: ‘title-h1h2 header-dark header-transparent’
content:
items: ‘@self.modular’

5

I checked and did everything you said above.

Maybe the Grav concept of parallax is different from the WordPress concept.

Here is WordPress: https://radioqsl.com

Here is my Grav: https://adamsblake.net/grav2/

In Parallax whatever is under the pix should scroll up over the pix.

6

Yeah, the background is not staying in a fixed position which makes it seem clunky when scrolling. Works good when you use the button the scroll.

7

So it seems you can make it function a little more like what you would expect by editing the site.js file and change this function:

function parallaxBackground() {
('.parallax').css('background-positionY', ((window).scrollTop() * 0.0));
}

Then add some css to you custom css file:
.parallax {
background-position-y: -40px !important;
background-attachment: fixed;
}

8

I made the code and CSS changes… didn’t make a difference.

Thanks anyway. I appreciate the help.

9

weird it works fine on my site. Make sure your cache is not interfering. Go in to the system caching and turn it off and refresh the site. Also, try in a private instance of the browser. I know I had to disable the caching ot get the javascript to load properly.

10

Unless Grav has some kind of cache module, I was sure that I didn’t have a cached file in the browser… and I tried with both Chrome and Safari.

Anyway, it is not important as I’m not going to look at Grav again until the end of the new year. I’ve looked at it every December since 2017.

Perhaps as this product matures it can actually give WordPress meaningful competition. but right now there is simply no substantial business incentive I can see for a web design house like mine to phase out WP in favor of Grav.

The learning curve for my front-end designers will be enormous and the admin backend, while not bad is not yet mature enough for a typical non/low tech end-user to manage.

Grav is easier and more intuitive than the JAMstack platform, but the traditional CMS platforms meet more of our needs than Grav does so far.

Thanks for all the help.

11

@dev77,

Grav does have a cache and it is what was interfering with the JavaScript refreshing on my site.

I do understand where you are coming from about switching from WordPress to Grav. I spent the last two days messing with Grav and although I like it, it felt like it fought me with everything I tried to do. My goal is not to ditch WordPress but to learn something new, improve my skills and support the Grav community. I think Grav can be a viable solution but requires having good skills with Twig and the time to develop your own themes, templates and working solutions to work from. Even without knowing any twig, I found editing templates easier in Grav. I did have issues with creating inheritance themes. Some worked, some didn’t. Switching themes, as I think you had mentioned, can be a pain with missing templates. Overall, I am impressed with Grav and will continue to learn how to develop sites with it.