Demystifying Parallax: Learn to Create Interactive Web Pages with JavaScript | Rich Armstrong | Skillshare
Staff Pick

Demystifying Parallax: Learn to Create Interactive Web Pages with JavaScript

Rich Armstrong, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Videos (2h 53m)
    • Why You Should Take This Class

      0:59
    • Parallax Explained

      1:48
    • How This Class Is Going To Work

      2:45
    • Inputs And Outputs

      0:52
    • Capturing Mouse Movement

      18:15
    • Connecting Mouse Movement To An Output

      19:55
    • Creating The Parallax Effect

      13:24
    • Making It More Realistic

      20:08
    • Plan Like An Amateur

      5:38
    • Capturing Scroll Position

      12:50
    • Unique Input Values For Each Element

      15:19
    • Using Mouse And Scroll Position

      3:49
    • Other People's Code

      1:39
    • Putting It All Together

      54:10
    • What's Next?

      1:01
46 students are watching this class

About This Class

1549df1c

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.


Here are some related classes, that you may like to take before this one:

193

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Rich Armstrong

Product Designer

Although Rich calls himself a Product Designer he's more of a jack-of-all-trades / generalist / unicorn. He designs, animates and codes. And if you want to learn how to make stuff unicorn-style then read on! Rich studied multimedia design and graphic design, and taught himself to code. He's freelanced, worked for agencies and startups, and now runs a studio with his wife in Amsterdam. He creates compulsively, has super ginger-powers and can touch his nose with his tongue!

Rich ...

See full profile

Report class