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.

General

Make parallax work on Quark

Started by A.Canton 6 years ago · 10 replies · 789 views
6 years ago

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.

6 years ago

try removing the ' from the classes.

hero_classes: parallax text-light

6 years ago

Thanks, but removing the ' made no difference.

6 years ago

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'

6 years ago

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.

5 years ago

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;
}

5 years ago

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

Thanks anyway. I appreciate the help.

5 years ago

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.

last edited 12/22/20 by Thomas Foy
5 years ago

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.

5 years ago

@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.

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 80 9 hours ago
General · by pamtbaau, 14 hours ago
1 51 13 hours ago
General · by Andy Miller, 1 day ago
0 44 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago