Art & Code: Create and Code an Interactive Parallax Illustration

Jarom Vogel, Digital Illustrator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (2h 26m)
    • 1. Intro

      2:11
    • 2. Drawing 1 Concept and Thumbnails

      21:16
    • 3. Drawing 2 Refining Your Sketch

      3:06
    • 4. Drawing 3 Blocking in Colors

      20:46
    • 5. Coding 1 Preparing Your Layers

      9:38
    • 6. Coding 2 HTML, CSS, and JavaScript

      12:14
    • 7. Coding 3 Drawing to the Canvas

      30:46
    • 8. Coding 4 Touch and Mouse Controls

      19:35
    • 9. Coding 5 Motion Controls

      14:03
    • 10. Coding 6 Finishing Touches

      12:32
50 students are watching this class

Project Description

Create a parallax illustration and post a video of it! (And be sure to include a link to the project if you publish it somewhere, too!)

I've included all the code and images for my finished project, as well as stopping points along the way for you to compare to if you get stuck.

Good luck!

Student Projects

project card
Victoria Blair
1 comment
project card
Hana Robinson
4 comments
project card
Jon Deviny
project card
Alberto De Marco
6 comments
project card
Natalia R
1 comment
project card
2 comments
project card
Fanny Rengot
2 comments
project card
Andy Rash
project card
Ashley S.
1 comment
project card
Tiff Duncan
project card
Frank Chen
project card
Gunes Ozcan
project card
Anna Avetisyan
1 comment