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!