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.
- Attention to details and breaking things into the smallest parts possible will make your site stand out.
- The creative parallax websites, that are correctly implemented stand out and draw attention, much more attention then your average WordPress theme.
- Interactive infographics are becoming very popular and the prediction is even more brighter for 2015.
- Enjoy making them and learning from project to project, there is not many people on earth who are capable of doing them correctly.
- The people who say they hate parallax scrolling websites will check it out anyway (they just want to see what the fuss is about).
- and they will scroll all the way down the page
- and they will check your portfolio out
- and most likely they will tell their mates about it.
Responsive or mobile optimised
- Decide up front which approach you’ll take (no optimization, mobile optimized, turning scrolling animations off for mobile).
- Make sure your client knows about your approach UP FRONT.
- Make the site responsive first, then implement scrolling library and effects.
- Video tag doesn’t support an auto play on mobile, think about your fall-back image if you are using video in the background.
- Disabling scrolling effects on mobiles will save you a lot of time and is quite often a wiser option.
- Stay away if you are a messy developer.
- Keep your stylesheet super organized with comments for main sections and subsections.
- Become very familiar with absolute, relative and fixed CSS positioning, it will make your life much easier.
- Split the code editor window horizontally this will help you with tweaking your styles across breakpoints.
- Learn the basics of parallax scrolling first before trying to build the next Be Moved or Mac Pro sites.
- Don’t start to implement scrolling animations until you have your page(s) working in all browsers and responsive.
- Don’t think it’s hard. When you know what you are doing, everything is easy!
- Don’t think it’s easy, if it was, everyone would be doing it.
- 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!
Can this work with WordPress?
Sure, you can implement parallax scrolling in your WordPress theme.
Great tips Petr! very useful. thanks much!
Thanks Sharif, hope it saves you time and headaches.
I’ve always loved parallax scrolling. I wish mobile implementation was easier. Thanks for the great tips.
Thanks Jordan. Parallax scrolling is cool, but I agree the mobile implementation is not the easiest.
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.