I must admit, I am not the biggest fan of parallax websites, but it looks like it’s still a very popular effect for web designers. On my recent project for one of my clients, I was asked to create a simple parallax effect on the home page and actually quite enjoyed playing around with different settings and effects.
Today I’d like to share with you a simple demo of a few parallax effects created using Skrollr.js.
Note:This demo has been updated to more detailed tutorial.
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.
I was really impressed with your parallax scroll effect article. As I was reading documentation on this, I was wondering what kind of variables I’m going to run into if I wanted to integrate this into a public WordPress theme. Something like The7 or Avada?
I’m assuming I can’t just upload the .js file, add some code to the main.js and fire up some Skrollr.js? I attempted as such and it’s a no go. I’m happy to provide a sample URL if this should work.
Basically, I’m just really interested in seeing if I can add the kind of functionality. Firing animations where they are triggered by the viewport instead of being fired, and never refired, after coming into the viewport is an outstanding look. I’m surprised it’s not more widespread.
Hi David, the code can be implemented into any WordPress theme or other CMS. You just have to make sure the you are including the JavaScript files the right way. Also the main.js jQuery content might need to be slightly changed to work in WP.
I don’t understand the effect you describing in the last paragraph, can you elaborate on that?
I don’t understand how to install on a WordPress page. Please explain and give examples?
Hi. I use this parallax aproach it is one of the best but i just one to now why i have space of top and bottom when scrolling on some heights and mobile and when i add more text in element with this background image.
Hi Petr,
I’m interested in purchasing your skrollr combo tutorials. I’d basically like to use skrollr in wordpress themes – how easy is this to implement? I work primarily with wordpress, so that is the deciding factor.
Thanks in advance!
Finn
Hi Finn, thanks for your interest in the Skrollr Combo. Skrollr can definitely be implemented in a WordPress theme.
How easy is to implement it? This depends on your WordPress and Skrollr skills, but if you’ve already build a few themes, you shouldn’t have troubles implementing it.
Here’s a quick guide on how to include external plugins in your WP theme.
Hope that helps and let me know if you have any other questions.
Hi Petr,
Really nice tutorial. I am considering purchasing the tutorials. However, this demo doesn’t seem to work in IE 8. Is the cross-browser comparability covered in the tutorial?
Arya
Hi Arya, thanks for your interest in the Skrollr tutorials.
Yes, the demos in the PSM are working in IE+, however some of the effects are using CSS3 2D Transforms that are not supported in the browsers.
Anything else is working fine.
Hope that helps and let me know if you have any other questions.
Cheers Petr