All prices in USD
Are you tired of copying and pasting an existing code from random tutorials without actually understanding how the scrolling animations work?
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?
I know exactly how it feels
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.
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.
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
- Introduction – Why is parallax scrolling so attractive?
- The anatomy of html and css – understanding the html and css structure of our demo files
- Starting with Skrollr.js – including Skrollr in your project and setting the first data atributes
- Skrollr data attributes 101 – getting your head around bottom-top, top-bottom
- Simple background animation – subtle background animations make a difference
- Absolute vs Relative – absolute mode explained
- Absolute vs Relative Part 2 – relative mode explained
- Mastering Timing – simple demo explaining principles for a total control of your timing
- Mastering Timing 2 – continue of the previous timing demo
- Mastering Timing Exercise – your turn, take files and create something on your own
- Pausing element – how to pause an element on scroll
- Swapping Background Images – how to swap background images
- Using Percentage Values – the key for responsive parallax websites
- Using Percentage Values Exercise – practice percentage values on your own
- Making it responsive – learn when and how to make it responsive
- Turning it off for mobile and touch devices – learn why and how to turn it off for mobile and touch devices
- Amir vs Floyd – Round 2 – final project, putting it all together
- Amir vs Floyd – Exercise – the game is on, you are now in control
- FAQs – all your questions answered
- Total class duration: 2h 51min
- One-off payment, with lifetime access.
- Video files not available for download.
- Learn at your own pace.
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.
- designers and developers with a working knowledge of HTML and CSS
- 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
- 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.
- 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.