Parallax one page with Roots

1

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

2

I’ve done it (the hard way) here http://damemedia.com, 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.

3

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

4

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

5

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

6

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

4 Likes
7

still having issue. need some better tutorial with roots and parallax. getting grunt error with parallax.js
http://projects.qbf.ie/iona/

8

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.

9

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 = [
    'assets/vendor/skrollr/src/skrollr.js',
    'assets/js/plugins/*.js',
    'assets/js/_*.js'
  ];

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

10

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

11

No plugin at all, just markup :wink:

12

i love to see the code :wink:

13