Demystifying Parallax: Learn to Create Interactive Web Pages

With JavaScript, HTML & CSS

Instructed by Rich Armstrong

  • Includes all Standard Features
  • Get Unlimited access to all the courses
  • No Contract. Cancel Anytime
Starting in just $19 / mo see all plans
Subscribe Now
$ 299
Annual Subscription
  • One year Unlimited Access
  • Access to all courses
    You will be able to access all the courses from any category on the platform.
  • Learning paths access
  • Access Assignments & Projects
  • Access on Mobile, PC and Tablet
  • Pause & Resume Courses Anytime
  • Offline viewing
  • Instructor Support
  • Course Completion Certificates
  • Cancel Anytime
Subscribe Now
  • Create a parallax experience with JavaScript, HTML and CSS
  • Understand how to connect (or map) inputs to outputs in JavaScript
  • Understand the theory behind Parallax

You know what parallax is right? It’s that awesome 3D effect we’ve seen in tons of websites, games and apps (like Alto's Adventure for example). Parallax is an interaction delight and it attracts people like crazy. It may appear like voodoo and dark magic, but it’s actually pretty simple to code yourself! In this class I’m going to peel back the illusion that parallax is and show you how to start making interactive web pages with JavaScript.

You'll learn to create an interactive illusion of depth – where items further away move at a slower speed than items that are closer. And you’ll learn to make everything respond to a user's movement, like when the mouse moves or when the page scrolls.

The class is designed for someone with a basic knowledge of HTML, CSS + JavaScript. I do have some beginner classes on HTML + CSS and JavaScript that should get you up to speed.

Throughout this class, we'll cover:

  • Listening for user input (mouse movement and scroll position changes).

  • Connecting element properties like position, blur, and scale to user input.

  • Creating life-like illusions.

  • JavaScript principles.

 

 


  • A basic knowledge of HTML, CSS & JavaScript
  • A code editor like Sublime Text or Visual Studio Code
  • Developers wanting to start creating more interactive frontend experiences
  • Designers wanting to who want a fun and friendly way of getting into creative and interactive coding
  • Designers and developers who want a theoretical and a practical course on how to create a parallax experience
View More...

Section 1 : Introduction

  • Lecture 1 :
  • Lecture 2 :
  • Parallax Explained
  • Lecture 3 :
  • How This Class Is Going To Work

Section 2 : Basic Parallax (4-8)

  • Lecture 1 :
  • Inputs And Outputs
  • Lecture 2 :
  • Plan Like An Amateur
  • Lecture 3 :
  • Capturing Mouse Movement
  • Lecture 4 :
  • Connecting Mouse Movement To An Output
  • Lecture 5 :
  • Creating The Parallax Effect

Section 3 : Advanced Parallax (9-12)

  • Lecture 1 :
  • Making It More Realistic
  • Lecture 2 :
  • Capturing Scroll Position
  • Lecture 3 :
  • Unique Input Values For Each Element
  • Lecture 4 :
  • Using Mouse And Scroll Position

Section 4 : Conclusion

  • Lecture 1 :
  • Other People's Code
  • Lecture 2 :
  • Putting It All Together
  • Lecture 3 :
  • What's Next?

Rich Armstrong,

Rich's title is Product Designer but he's more of a jack-of-all-trades / generalist / unicorn. He designs, animates and codes. He's studied multimedia design and graphic design, and is a self-taught programmer. He's freelanced, worked for agencies and startups, and now runs Studio Armstrong, an Amsterdam-based creation company, with his wife. He also doodles all the time, has super ginger-powers and can touch his nose with his tongue! He spends most of his working day researching and experimenting, much like his hero, Lucius Fox, does. Rich likes to think he's a minimalist, but he's fooling himself – he's as messy and unorganised as the any other creative genius. Rich has been teaching online classes since 2015 – and he likes it a lot :) He's since created the weirdly named Tap Tap Kaboom brand that showcases his experiments, designs and classes.
View More...
develop-your-own-chrome-extension-firefox-plugin

Develop your own Chrome Extension &...

By : Harshit Srivastava

Lecture 15

the-extreme-web-development-course

The Extreme Web Development Course

By : Paul Carlo Tordecilla

Lecture 124

superb-advance-javascript-become-javascript-professional

Superb Advance Javascript - Become ...

By : Paul Carlo Tordecilla

Lecture 28

application-development-with-ibm-watson

Application development with IBM Wa...

By : Harshit Srivastava

Lecture 14

learn-react-16-and-redux-by-building-real-world-application

Learn React 16 and Redux by buildin...

By : Haider Malik

Lecture 74

jquery-for-beginner-to-advanced-12-projects-included

jQuery for Beginner to Advanced: 12...

By : Sandip Bhattacharya

Lecture 15

Buy

$15

Sign up and start learning
By signing up, you agree to our Terms of Use and Privacy Policy
Forget Password