Browse Library

Demystifying Parallax: Learn to Create Interactive Web Pages

With JavaScript, HTML & CSS

Instructed by Rich Armstrong

7 days left at this price!
$35 $45 22% off
Get single Course Access
$35
It Includes
  • Get access to this course only
  • Lifetime Course Access
  • Play & Pause Videos
  • High Quality Recorded Lectures
  • Learn Online from Mobile/PC/Tablet
  • Download Course for Offline Viewing
  • Inlcudes Real Projects
  • Free Instructor Support
Want to Learn more? Get access to all marketplace courses starting at $19/mo/ month
  • 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?
  • How do i access the course after purchase?

    Once you purchase a course (Single course or Subscription), you will be able to access the courses instantly online by logging into your account. Use the user name & password that you created while signing up. Once logged in, you can go to the "My Courses" section to access your course.
  • Are these video based online self-learning courses?

    Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
  • Can i play & pause the course as per my convenience?

    Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
  • How do i contact the instructor for any doubts or questions?

    Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
  • Do i need a pc to access the course or can i do it on mobile & tablet as well?

    Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
  • Do i get any certification after completing the course?

    Yes. Once you succesfully complete any course on Learnfly marketplace, you get a certiifcate of course completion emailed to you within 24 hours with your name & the Learnfly badge. You can definately brag about it & share it on your social media or with friends as one of your achievement. Click here to view the sample certificate Click Here
  • For how long can i access my course after the purchase?

    If you buy a single course, that course is accessible to you for a lifetime. If you go for a premium subcription, you can access all the courses on Learnfly marketplace till your subscription is Active.
  • Whats the difference between Single Course Purchase & Go Premium option?

    With Single Course Purchase, you only get an access of one single course. Whereas, with premium monhtly or annual subscription, you can access all the existing or new courses on learnfly marketplace. You can decide what option suits you the best and accordingly you can make your purchase.
  • Is there any free trial?

    Currently, we don't have any free trial but it may be available in near future.
  • What is the refund policy?

    We would hate you to leave us. However, if you are not satisfied, you can ask for a full refund within 30 days & we will be happy to assist you further.

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...
the-extreme-web-development-course

The Extreme Web Development Course

By : Paul Carlo Tordecilla

Lecture 124

develop-your-own-chrome-extension-firefox-plugin

Develop your own Chrome Extension &...

By : Harshit Srivastava

Lecture 15

the-ultimate-codeigniter-3-course

The Ultimate Codeigniter 3 Course

By : Paul Carlo Tordecilla

Lecture 23

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

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