How to create a parallax scrolling website

Parallax Scrolling Effect using Skrollr.js

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

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

    Reply
    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?

      Reply
  2. Spedicija

    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.

    Reply
  3. Finn

    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

    Reply
  4. Arya

    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

    Reply
    1. Petr Tichy Post author

      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

      Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.