How to create a parallax scrolling website

Parallax Scrolling Effect using Skrollr.js

December 12, 2013 • Web development2 Replies

Share on Facebook0Tweet about this on Twitter1Share on Google+6Share on LinkedIn9

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.

View Tutorial

Parallax Scrolling Master Class

Do you want more front-end development tips?

Join other 14,383 curious front-end developers and receive similar articles straight to your inbox. No spam, just the stuff you really want.

2 thoughts on “Parallax Scrolling Effect using Skrollr.js

  1. David

    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.

    1. Petr Tichy Post author

      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?


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>