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.

General

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.

Responsive or mobile optimised

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

Dos

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

Don’ts

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

Conclusion

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: