Parallax Scrolling Master Class

Learn how to build a parallax scrolling website from scratch.

Are you tired of copying and pasting an existing code from random tutorials?

James Hanratty

This is the most comprehensive parallax training I have been able to find! I am kicking myself for not buying it sooner.

5 stars

James Hanratty
Ian Webster

Genuinely worth the money. This will save me so much time. I even signed up to the Skrollr Combo upgrade for the next skrollr course before I had fully completed this one!

5 stars

Ian Webster
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.

5 stars

Tom Schreck

Join other 9086 happy designers and developers, sign up today!

Are you confused by the Skrollr data-attributes?

Learn how to build scrolling animations without any headaches.

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

Get 3 hours of Skrollr tutorials and all demo files so you can follow me step-by-step.

Intended Audience

Is this for you?

  • Anyone with a working knowledge of HTML and CSS.
  • Anyone with little or no jQuery/JavaScript experience.
  • Designers trying to design for parallax websites or build their own.
  • Anyone who ever tried to use Skrollr and found it super confusing.

Objectives

What will you learn?

  • 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!

Prerequisites

What do you need before start?

  • 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!

Table of Content

20 HD videos uncovering the power of Skrollr!

Module 1 Overview
Introduction to parallax scrolling and our demo template deconstruction.
Unit 1 Introduction
Unit 2 The Anatomy of HTML and CSS
Module 2 Skrollr basics
Getting started with Skrollr and the data attributes.
Unit 1 Starting with Skrollr.js
Unit 2 Skrollr data attributes 101
Unit 3 Simple Background Animation
Unit 4 Absolute vs Relative
Unit 5 Absolute vs Relative 2
Module 3 Advanced animations
Experiment with more advanced animations and effects.
Unit 1 Mastering Timing
Unit 2 Mastering Timing 2
Unit 3 Mastering Timing Exercise
Unit 4 Pausing an Element
Unit 5 Swapping Background Images
Unit 6 Using Percentage Values
Unit 7 Using Percentage Values Exercise
Module 4 Responsive and Mobile
Working with Skrollr on responsive and mobile websites.
Unit 1 Making It Responsive
Unit 2 Turning Skrollr Off For Mobile
Module 5 Putting it all together
All we have learned applied to a practical use.
Unit 1 Amir vs Floyd – Round 2
Unit 2 Amir vs Floyd Exercise
Unit 3 Final Words
Module 6 Q&A
Find the answers to the most frequent questions, or ask your own questions related to this course.
Unit 1 Your Questions Answered – PSM

It’s great! In fact I think it is making it so simple that I almost feel like I didn’t need the course! 😉
Worth the dollars.

5 starsDan

Course Packages

Select your package.

Parallax Scrolling
Master Class

Learn Skrollr animations.

$97

$67

  • Lifetime access
  • 3hrs of HD Skrollr Tutorials
  • Stream from any device
  •  

Most Popular

Skrollr
Combo

Master Skrollr and SVG animation.

$134

$97

Go to Combo

  • Lifetime access
  • Access to Parallax Scrolling Master Class
  • Access to Skrollr Workshop
  •  

Animation
Combo

All my courses in one package.

$328

$197

Go to Combo

  • Lifetime access
  • Access to GreenSock Combo
  • Access to Skrollr Combo
  • VIP discount on my future courses

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?

Price in USD, One-Off Payment, Instant Access

Have a few questions? No worries.

Can I download the videos and watch them offline?

No, video files are not available for downloads. You need to be online and logged in to my site to be able to follow this course.

What software do I need to complete the workshop?

All you need is a code editor (I am using Sublime Text). You can download the starting files and follow me step-by-step from start to finish of each project.

What if I sign up and find out it's not for me?

You are covered by my 14 days money back guarantee. If you are not thrilled after watching the first 5 videos, you can enjoy my 100% money back guarantee. Simply contact me for prompt refund of the full purchase price.

Skrollr is no longer supported by the author, should I spent time learning it anyway?

Skrollr is no longer actively developed, but still works fine in all major browsers. Alex, the author of Skrollr is predicting issues especially on mobile and we cover how to turn scrolling animations off for mobile inside of the class. If you are still not sure, you can look into ScrollMagic if you feel comfortable writing JavaScript code. Check out my other courses on ScrollMagic.

Does it have “closed caption” so I can read the captions while the video is playing.

No, unfortunately the videos don’t have any subtitles or closed captions at the moment.

I have another question!

For any other questions use the Get In Touch form or hit me up on Twitter @ihatetomatoes.

Do you want to master JavaScript animations?

Here is what others think about the Parallax Scrolling Master Class.

5 stars
By 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.

5 stars
By 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!

5 stars
By 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

5 stars
By 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.

5 stars
By Damian Phillips-King

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


Made by Petr Tichy
Now that you are at the bottom of the page, why not to do some clicking instead of scrolling and reading?