Parallax Scrolling Master Class

$67.00

All prices in USD

How to build a parallax scrolling website even if you’ve never written a single line of JavaScript code in your life.

Are you tired of copying and pasting an existing code from random tutorials without actually understanding how the scrolling animations work?

Get even better value by getting Skrollr Combo!

Do you wish you could turn any of your creative ideas into a smooth parallax scrolling animation, without tonnes of headaches?

Are you ready to impress your boss or build an awesome scrolling site for your client?

Feedback - Ashley

I know exactly how it feels

I was also overwhelmed by the number of JavaScript plugins available.

I was also super confused by the Skrollr data-attributes, and frustrated because I didn’t know exactly how scrolling animations work.

I have spent weeks and weeks writing demos, tutorials, and building scrolling websites (eg. Merry Christmallax, and Happy 25th Birthday Game Boy) and I wish there was a course like this that would’ve help me get started.

Feedback - Valerio

The most complete scrolling animation training

This course is the most comprehensive parallax training you can find.

It will remove any questions, guess work, and save you lots of time researching and figuring out.

Read the class reviews from students who already completed this course at the bottom of this page.

Build a scrolling animation without any headaches

We will cover everything you need to know to be able to build a custom parallax scrolling website from scratch.

The course is broken down into simple hands-on lessons, helping you understand the concept from the basics – and progressively explaining even the more advanced animations.

Feedback - Tom

What you will learn

The Parallax Scrolling Master Class is a collection of step-by-step demos teaching you:

  • how to setup your HTML and CSS
  • how the Skrollr data-attributes work (I know this is a pain!)
  • how to be in control of your animations
  • how to make it responsive and mobile optimised
  • and much more!

You’ll get almost 3 hours of video tutorials, accompanied by downloadable demo files so you can follow every step along the way.

All your questions will be answered at the end.

Once you complete the course…

You will be able to build custom animations from scratch without any headaches.

You will be in complete control over the positioning, timing, and animations of your HTML elements.

Imagine being able to turn any of your creative ideas into smooth scrolling animations.

Stop wasting your time and start having fun while building a cool scrolling animations.

See what Lee, one of the students, was able to create on his own in this short video.

Table of content

  1. Introduction – Why is parallax scrolling so attractive?
  2. The anatomy of html and css – understanding the html and css structure of our demo files
  3. Starting with Skrollr.js – including Skrollr in your project and setting the first data atributes
  4. Skrollr data attributes 101 – getting your head around bottom-top, top-bottom
  5. Simple background animation – subtle background animations make a difference
  6. Absolute vs Relative – absolute mode explained
  7. Absolute vs Relative Part 2 – relative mode explained
  8. Mastering Timing – simple demo explaining principles for a total control of your timing
  9. Mastering Timing 2 – continue of the previous timing demo
  10. Mastering Timing Exercise – your turn, take files and create something on your own
  11. Pausing element – how to pause an element on scroll
  12. Swapping Background Images – how to swap background images
  13. Using Percentage Values – the key for responsive parallax websites
  14. Using Percentage Values Exercise – practice percentage values on your own
  15. Making it responsive – learn when and how to make it responsive
  16. Turning it off for mobile and touch devices – learn why and how to turn it off for mobile and touch devices
  17. Amir vs Floyd – Round 2 – final project, putting it all together
  18. Amir vs Floyd – Exercise – the game is on, you are now in control
  19. FAQs – all your questions answered

Additional Information

  • Total class duration: 2h 51min
  • One-off payment, with lifetime access.
  • Video files not available for download.
  • Learn at your own pace.

Instructor

Petr Tichy

Petr Tichy is a professional front-end developer with many years of experience in web development.

In this class he shares his knowledge and experience gained by creating number of parallax scrolling tutorials and websites such as Merry Christmallax, Happy 25th Birthday Game Boy and Merry SVG Christmas.

Intended Audience

  • designers and developers with a working knowledge of HTML and CSS
  • designers and developers with little or no JavaScript experience
  • curious front-end developers trying to boost their skill set
  • designers trying to design for parallax websites or build their own
  • anyone who ever tried to use Skrollr and found the data attributes super confusing

Objectives

  • Skrollr data attributes explained in simple step by step demos.
  • A variety of transitions and effects.
  • How to "pause" a scrolling element.
  • What your options are when it comes to making it responsive.
  • Which positioning technique is the easiest to use.
  • Step by step guide on how to create a parallax scrolling website from scratch.

Prerequisites

  • No JavaScript knowledge required.
  • Working knowledge of html5 and css3.
  • Positive attitude towards learning new techniques.
  • A genuine interest in scroll triggered animations.
  • Tomato lovers more than welcome!

100% MONEY BACK GUARANTEE

Watch the first 5 course videos and if you are not completely satisfied I’ll give you your money back.

I am so confident that you will enjoy the course that you have 14 days to watch the first 5 videos, if you feel you are not learning enough you can enjoy my 100% money back guarantee.

Simply contact me for prompt refund of the full purchase price.

54 thoughts on “Parallax Scrolling Master Class

  1. David van Zyl

    Petr’s masterclass was exactly what I needed to get to grips with the intricacies of Skrollr.

    The course is very well structured and each element follows the other naturally and logically. The examples are clear, the information well presented, the potential pitfalls well illustrated and their solutions shown with clarity.

    I wholeheartedly recommend this to ANYONE who wants to spice up their designs with the power of animation.

    Verified Purchase
  2. Tom Schreck

    This is an awesome class. Petr does a fabulous job explaining the concepts and showing you step-by-step how to get started and up to speed with this technology. I highly recommend this class. Enjoy!

    Verified Purchase
  3. junjie liu

    Okay I have to say this class is simply advanced, very well structured I don’t even know what is CSS and Html to be honesty I m totally new to web design

    BUT, I m close to do some animation now!!! woohoo.

    #full blown parallax

    Verified Purchase
  4. Antonella Perna

    I’ve only got to lesson 6 so far and I’m simply loving this course. Each lesson is well focused and follows logically from the preceding one.

    The data attributes used by the Skrollr js plugin are finally made clear so that mastering them to achieve the desired effects seems now possible.

    The concepts are explained clearly and illustrated with hands-on tasks. The downloadable zip file contains the start project and the end project and it’s really easy to follow along using the former.

    Excellent, I warmly recommend this course to anyone who’s interested in the use of the parallax technique in web design.

    Verified Purchase
  5. Damian Phillips-King

    So far mind blown by the different parallax sites :).

    Verified Purchase
  6. Alessandro Muraro

    Great course, really enjoying it and exactly what’s needed to level up, thanks!

    Verified Purchase
  7. Gary George

    Hey jus thought i would leave a comment, this was 100% worth paying for.
    Excellent course. highly recommend.

    Gary

    Verified Purchase
  8. Lewis Moffat

    Could not recommend the course more. Usually I’m pretty hesitant about leaving reviews but this course is too good. Its informative, clear, and helpful. On top of that it gives a great amount of resources to construct our own sites. Thanks Petr!

    Verified Purchase
  9. Carlos Maldonado

    Excellent course. I highly recommend. I came in with a gap on how to do things, this class absolutely fulfilled it! Great job Petr! Looking forwarded to learn more.

    Verified Purchase
  10. valerio pierbattista

    i’ve been trying to figure out parallax scrolling from a while but could never reach exactly the amount of control i wanted with it, that’s why i decided to purchase this course.

    i really enjoyed it and I finally i have a clear vision of what skrollr does and how to use it. I now have 1000 ideas i want to experiment using parallax scrolling, can’t wait to produce something on my own.

  11. Joe Ng'ethe

    I am a front end developer who has less knowledge on Javascript besides jQuery. I am fascinated by the parallax scrolling technique and i have my own website that i want to use this technique to wow my visitors. I have just started on this class and i can’t wait to be a parallax pro. Good tutorial, it is worth it.

  12. James Hanratty

    This is the most comprehensive parallax training I have been able to find! I am kicking myself for not buying it sooner. From the clear, easy to follow videos to the well documented resource files, Petr has taken all the guess work out of complex animations.

  13. nicolas germen

    I finally found a course which explains how to make a parallax site from the beginning.
    Definitely worth the investment and through this course will conduct a portfolio out of the box and appealing to what the market seeks.

  14. Sherrie Roberts

    This class was great and worth the money! It helped me to understand how to use it now just need more advanced techniques shown in another class.

    I need to know how to have an element go down the side of a page cut through the page and down the next side. I have it somewhat doing it now but I am thinking I need to do more scene type structure. Any help would be appreciated.

  15. Ashley Carter

    I love this course. Very intelligent and well put together. Please put out more classes in the future.

  16. Andree Wendel

    Wanna create some fancy cool scrolling responsive websites? Watch the course and just do it!

    I spent 59$ and an afternoon. Now I put some Wow in my sites.

    5 stars…

  17. Nicole Y

    Absolutely worth the investment! The course covers not only how to make a Parallax website, but also different efficient techniques how to work on web development projects.

    Whenever I asked Petr any related questions, he always came back to me with the easily understanding answers. It gives me a super good impression. Petr does teach you how to work on website projects, not just makes videos and sells his course!

    I would strongly recommend this course to anyone who wants to learn and improve their web design/development skills.

  18. Alex Steele

    I really enjoyed this class. I would recommend it to anyone who wants to understand the basics of parallax and skrollr.

  19. Rene Gückel

    This Parallax Scrolling Class was excellent and saved me hours to get into Parallax Scrolling with Skrollr.js. Now it’s much easier to understand how Parallax Scrolling works. I can recommend this class to everyone who wants to start with an own Parallax website. I hope this was not the last class keep on going like this Petr.

  20. David Churches

    Trying to get your head around Skrollr without help, although possible, would be challenging and take time. Petr makes the complexities simple to understand and the exercises reinforce that.

    I would recommend this to anyone who wish to do parallax animation. Once you get your head around the offsets and transitioning the sky’s the limit. I am on Unit 14 and already thinking about how to animate my new website.

  21. Neil Dixon

    Terrific class. Petr explains everything clearly and completely demystifies skrollr. I saved many hours of my time creating my first parallax pages thanks to what I learned. Nothing else out there matches this course’s detail and clarity. Well worth the money.

  22. Carin Camen

    Petr’s Parallax Scrolling Master Class not only provided clear instruction to understand Parallax Scrolling, but also introduced techniques in Skrollr and Google web developer tools. His ability to break down a complex topic into simple terms and reinforce it with exercises allows you to gain confidence and knowledge.

    I would highly recommend this course to anyone who is interested in learning Parallax Scrolling. I was in desperate search for a course to code my next website design. I now have the confidence to more forward.

    The only comment I would make in improving this course is to continue incorporating each lesson into the next module rather than having each training module have a new start index. This will allow the user to implement each element in the training to be seen in the final project.

    Thank you Petr, keep them coming!

  23. Chris Melillo

    Easily one of the best online tutorials I’ve done. Well spoken, good progression, easy to follow, explanations are clear. Learned a ton and feel confident with it. Anyone looking to learn about parallax or skrollr, this is the place to be.

  24. Hye Kim

    Thank you Petr for putting this awesome tutorial together!

    I would have not had solid knowledge of parallax scrolling and skrollr animation without taking this course.

    It was super easy to follow and super well structured.

    Not to mention that you’re very responsive and helpful when I ask questions.

    There a few dumb questions I had to ask as a scripting challenging person, and Petr was kind and patient enough to answer every single questions.

    Thanks again and hope to see more to come!

  25. David Kizler

    The Parallax Scrolling Master Class opens up many new creative possibilities for the designer looking to add animation and parallax upon scroll.

    As a UI Designer, I am comfortable with HTML and CSS, but in the past I’ve been a bit shy with Javascript. This course helped me realize that Javascript can have huge payoffs and one doesn’t need to be a programmer to reap the rewards. I’ve started playing with other Javascript libraries like Wow.js and Lettering.Js and I’m seeing that a whole new world exists to bring life into my Sketch mockups.

    Another added bonus of this course is the focus on positioning, height and margins. So many tutorials over the past few years have been focused on responsive design and fluid width. This course helped me improve my techniques for how to vertically control the page.

    Petr is a very thorough and engaging teacher. If you work along side him, you will slowly see all the magic that can happen upon the simple scroll of a mouse or trackpad.

  26. Johnathan Wenske

    The course was great! So many new opportunities have opened up for my web designs.

    As a student I am always looking for new things and wanting to expand my knowledge; this course helped me a lot.

    It’s totally worth your time if you’re seriously wanting to make engaging interactive websites.

  27. O M

    This course is exactly that I wanted for learn about parallax and responsive sites.
    Tutorials are very clear, structure is excellent, it’s so easy to code with Petr!
    Thanks a lot!

  28. Gabrielle Cohen

    This course was such a huge help in getting started with Skrollr. I’ve been assigned a large project which requires parallax and to have this quick, easy, and intensive course on hand has been invaluable. In only a couple of hours I’ve been able to tackle my task with ease. Highly recommend.

  29. Michael Bond

    The course is great. Petr explains every concept in a clear and concise way. The examples all make sense, and I was constantly imagining ways of putting those concepts to use in new and creative ways. Can’t wait to start implementing them on my own websites. Thanks Petr!

  30. Murray Innes

    This is a great course if:

    – You have no experience with parallax scrolling.
    – You don’t want to write jQuery or Javascript.
    – You like your teaching in bitesize (10-min) videos.

    If you don’t learn from watching someone else code, this might not be the video for you, but Petr explains a lot as he’s going and I think it’s a course you can learn a lot from.

  31. Jorge Orihuela

    This course is just amazing!! Petr will guide you step-by-step into the basics of the beautiful world of website animation with parallax scrolling.

    When I checked the course preview, I knew it was just what I wanted and needed for improving my basis of web development.

    Every concept is explained thoroughly and they all are used in the final project of the course, which means there are NO loose ends or unuseful exaplanations.

    Thank you Petr, for sharing your knowledge in such a well organized and easy-to-understand way!

  32. paul fz

    Great Course, super comprehensive.
    This is not one of those scam courses out there, you can tell right away that Petr put a lot of effort into it. Totally recommended.
    Very happy about it.

  33. Steve Lucas

    I have found this course and learning experience to be second to none.

    The content and delivery has been 5 Star. Each exercise is more challenging than the last, which along with the final design, keeps you entertained and motivated to complete the whole course as quickly as time allows.

    The material is extensive and leaves you with the ability to become a master of the one page design that parallax lends itself to.

    I’ve gone from complete front end noob to being quite confident in turning design ideas into reality.
    Anyone who is wanting to utilise the skrollr library shouldn’t hesitate at taking part in this amazing tutorial.

    The support, guidance and advice that I’ve gained from this course has been invaluable!

    Thanks for creating such an amazing resource Peter!

  34. Ian Webster

    Genuinely worth the money. Unquestionably 5 stars.

    This tutorial was essential for me to grasp the proper way to approach animation with skrollr. Previously I felt rather as though I was using sheer guesswork and now I understand what I should be doing. This will save me so much time. Thank you Peter!

    I also learned quite a few other things other than just about skrollr. I even signed up to the Skrollr Combo upgrade for the next skrollr course before I had fully completed this one!

  35. Karen Hunter

    Just signed up for the combo and have completed the parallax masterclass. It’s a really good class – especially because some of the documentation on skrollr github is very confusing. Petr does a brilliant job explaining! I’m looking forward to seeing what else he has in store.

  36. Javier Mosquera

    You may want to do some horizontal parallax scroll, depending on what you need scroll parallax for. Is not all about websites, you know.

    Well, if that’s the case, know beforehand that the method used on this course, although is very very good, it DOES NOT cover horizontal scrolling. It just doesn’t function that way and you may don’t get to know that until you end the course.

  37. Daniel Schindler

    Petr brings you all what he promises in this course. It’s hands on and focussed on the important issues of working with Skrollr data-attributes. He comes up with some handy bonus hints as well.

    I must confess that I started from his examples earlier and tried to bootstrap it all with Prinzhorn’s documentation from github on my own. Puzzling the data-attributes was so confusing and ended up in a mess.

    Looking back now, after completing Petr course, let me wonder how I couldn’t understand Skrollr’s easy logic. Sometimes you just need introductions from a human to create interfaces for humans –thx, Petr.

  38. Marco Arras

    This course is well worth the money at $67, a steal. It has its value in gold. If you are looking for something to give your websites that extra push, to the next level, this is it. Skrollr will change the way you look at the flow of your website’s story. Petr makes it easy to learn and follow and gives you a chance to implement and solidify what you just learned. I bought the combo of courses which is an even better deal, and can’t wait to get started with svg!

  39. Klaus Ackermann

    Really a very good course and very well put together. The only thing I don’t really like is the intensive use of px based css. In today’s world of different devices accessing the same site, responsive approaches are a must and so this also must be taken into consideration when including skrollr animations in a webpage.

  40. michael garriques

    This is an awesome class. I learned how to do create some cool animations and learned some great CSS tricks for positioning and making elements responsive. Petr makes it easy and fun. I would recommend this course to anyone looking to learn about creating great parallax sites.

  41. Julian Leahy

    This is a fantastic tutorial. From start to finish everything is explained. I looked a few other similar tutorials before this and nothing came close.

  42. Thanh Tam Chau

    I love it ! and cant wait to finish it all, and apply it in my job.
    it worth every single dollar. thank you 😀 you are a life saver.
    and please do a separate full course for responsive webdesign ! I will definitely buy the course 😀

  43. Gareth Lewis

    Hey Petr,
    Thanks for the effort to get a full end-to-end course together. It was comprehensive, well structured, well taught and provided me with the information I needed.
    I’ve tried creating training courses myself and I can only guess at how much pre-work you must have done to end up with such a professional result.
    Well done and again, thanks.
    Gareth

  44. sadik sheikh

    Just signed up for the combo and have completed the parallax masterclass. It’s a really good class – especially because some of the documentation on skrollr github is very confusing. Petr does a brilliant job explaining!

  45. Moyashi

    Great class! Petr is a great instructor and explains things very well.

    You learn the nuts and bolts of parallax web design and coding, not just how to copy and paste. Just make sure you watch the lessons from start to finish, and don’t feel bad to repeat a few times.

    I finished the course within a few weeks and created my own website with some significant modifications to the template.

    The course gave me the confidence to experiment and try my own design tricks. I’m very happy with the result.

    For the price, this course is an amazing value.

    I look forward to learning more from Petr in the future!

  46. Eerik Salke

    This course is a great way to fast-track your learning of parrallax web techniques! Petr is a great teacher and everything is explained very clearly at a good pace. Highly recommended.

  47. jakub zavrel

    Before I have started with this course I have already builded one skrollr project on jakubzavrel.cz , but still there in course were informations which will help me in future projects. Even if I can say, that you can find all info from course for free, I recommned to buy this course and save your time for coding.

  48. Lindsay Shay

    I found this class to be easy to follow and very informative. I have intermediate knowledge of HTML5/CSS3 and little to no knowledge of JS and was able to keep up throughout the course just fine. I’ve learned so much! Definitely will have the rest of my team go through the class. Worth every penny. Cheers!

  49. Norman Dubois

    This course is just awesome!

    Petr does a great job on teaching the basics & advanced stuff.

    I already have experience in HTML/CSS/JAVASCRIPT but didn’t know how to create websites with parallax effects.

    Petr does a great job explaining everything from the ground up to more advanced stuff!

    I think Petr is one of the best teachers you can have in topics like animation and scrolling effects.

    He has an enormous knowledge of these topics and knows very well what he is talking about.

    The course is very well structured. At the beginning you learn the basics, following by more advanced stuff at the end of the course.

    I really enjoyed the structure and learning by applying the learned stuff in a real world project.

    The course never gets boring and if you’re starting you just can’t leave your computer because you want to learn more about Skrollr.

    The course is also a really good as a reference if you can’t remember the exact syntax or how to do something in your projects.

    Thank you Petr for this awesome course! I highly recommend it!

    It’s one of the best tutorial courses I watched so far!!

    Happy scrolling! :)

  50. Daniel Tavera

    This is an EXCELLENTE course, I never believed what to easy would be to use the parallax scrolling.

    Is the best tutorial about parallax scrolling I have seen and easy to understand and the structure is perfect to follow through the course.

    Absolutely I recommend this course!

    Thanks!!

  51. david abraham

    Amazing course, i was able to create my own skrollr site in few days after watching it, highly recommend it.

Comments are closed.