Parallax one page with Roots

I trying to develop a one page parallax theme from Roots. which will be Roots Parallax theme.
I am still having issues to implement parallax there. Is there any tutorial?
Or has anybody did this before with Roots? thanks

I’ve done it (the hard way) here, but there is nothing about Roots or WP that prevents standard parallax from working–it’s just markup + JS. If your markup and JS are correct and in the right place you should be fine.

Take a look at Skrollr. Good tutorials here and here.

issue is when i add skroll.js into my js folder , grunt throws error.

That issue has been widely addressed; please consider performing a search.

but issue is that when i add skroller.js to my js folder grunt throws error

But that issue has been widely addressed; please consider performing a search.


still having issue. need some better tutorial with roots and parallax. getting grunt error with parallax.js

It’s always helpful to say what error is being thrown. At a guess it’s a jshint error, which as @cfx said, has been widely addressed.

All you should need to do is exclude the parallax script from the jshint check as we’ve done for scripts.min.js here.

Hi @cfx, thanks for the links. I see skrollr is loaded at the bottom of your page.
I’ve installed skrollr with bower but I’m not sure where to add it.

Edit: I’ve added Init Skroller code to _main.js as in link and in Gruntfile.js as follows:

  var jsFileList = [

And worked! Skrollr gets loaded in scripts.min.js without extra http requests.

hi cfx, what plugin you used for portfolio showcase? thx

No plugin at all, just markup :wink:

i love to see the code :wink: