Parallax Scrolling Master Class

24 Tips For Making Great Parallax Websites

Starting to build your first parallax scrolling website? Not really sure what you are getting into? Don’t make the same mistakes that I have made and learn from these 24 tips. Or at least read the #11.


  1. Attention to details and breaking things into the smallest parts possible will make your site stand out.
  2. The creative parallax websites, that are correctly implemented stand out and draw attention, much more attention then your average WordPress theme.
  3. Interactive infographics are becoming very popular and the prediction is even more brighter for 2015.
  4. Enjoy making them and learning from project to project, there is not many people on earth who are capable of doing them correctly.
  5. The people who say they hate parallax scrolling websites will check it out anyway (they just want to see what the fuss is about).
  6. and they will scroll all the way down the page
  7. and they will check your portfolio out
  8. and most likely they will tell their mates about it.

Parallax Scrolling Trend

Responsive or mobile optimised

  1. Decide up front which approach you’ll take (no optimization, mobile optimized, turning scrolling animations off for mobile).
  2. Make sure your client knows about your approach UP FRONT.
  3. Make the site responsive first, then implement scrolling library and effects.
  4. Video tag doesn’t support an auto play on mobile, think about your fall-back image if you are using video in the background.
  5. Disabling scrolling effects on mobiles will save you a lot of time and is quite often a wiser option.


  1. Stay super organised in both your stylesheet and your data attributes (Skrollr) or JavaScript.
  2. Stay away if you are a messy developer.
  3. Keep your stylesheet super organized with comments for main sections and subsections.
  4. Become very familiar with absolute, relative and fixed CSS positioning, it will make your life much easier.
  5. Split the code editor window horizontally this will help you with tweaking your styles across breakpoints.
  6. Learn the basics of parallax scrolling first before trying to build the next Be Moved or Mac Pro sites.


  1. Don’t start to implement scrolling animations until you have your page(s) working in all browsers and responsive.
  2. Don’t think it’s hard. When you know what you are doing, everything is easy!
  3. Don’t think it’s easy, if it was, everyone would be doing it.
  4. Don’t include data attributes or JavaScript code, that you are not 100% sure what they are doing.
  5. Don’t try to do this as your first project, but don’t be discouraged from learning.


This is my 24 tips that I wish someone told me before I started building my first parallax scrolling website. Things could have gone much smoother than they did and I could have saved myself a lot of headaches.

If you are still struggling to understand where to start with building a parallax scrolling websites, or want to bring your skills to the next level, have a look at my Parallax Scrolling Master Class or:

Get my free Skrollr tips and save heaps of time!

The data-attribute tip, will save you hours if not days or weeks of figuring out. PLUS you'll get the first 2 videos from the popular Parallax Scrolling Master Class!

Enter your email below and I’ll send it right to your inbox!

100% Privacy. Guaranteed! Powered by ConvertKit

7 thoughts on “24 Tips For Making Great Parallax Websites

  1. Jordan Halliday

    I’ve always loved parallax scrolling. I wish mobile implementation was easier. Thanks for the great tips.

  2. David McGraw

    I’ve been digging into this a lot, and I’m working on making my own parallax site. I like what you mentioned about the background video, since I want to have video.js on there as well.


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.