Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
2 Hour(s) 52 Minute(s)
Language
English
Taught by
Rich Armstrong
Certificate
- Available
- *The delivery and distribution of the certificate are subject to the policies and arrangements of the course provider.
Rating
3 views
Course Overview
With JavaScript, HTML & CSS
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.
Course Content
- 15 section(s)
- 15 lecture(s)
- Section 1 Introduction
- Section 2 Parallax Explained
- Section 3 How This Class Is Going To Work
- Section 4 Inputs And Outputs
- Section 5 Plan Like An Amateur
- Section 6 Capturing Mouse Movement
- Section 7 Connecting Mouse Movement To An Output
- Section 8 Creating The Parallax Effect
- Section 9 Making It More Realistic
- Section 10 Capturing Scroll Position
- Section 11 Unique Input Values For Each Element
- Section 12 Using Mouse And Scroll Position
- Section 13 Other People's Code
- Section 14 Putting It All Together
- Section 15 What's Next?
What You’ll Learn
- 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
Skills covered in this course
Reviews
-
MMonique Navarro
This course is excellent clear, well-structured, and to the point. I learned so much and feel truly inspired. The instructor shared a lot of knowledge and motivation throughout the course. Highly recommended!What are you waiting for?
-
OOtacilio Yogui Junior
Excelente curso que agregam muitas técnicas de efeito parallax, com conteúdos e explicações de fácil entendimento.
-
JJuraj Suchon
very good so far, however the sound quality could be better... but it's detail... I expect the following content will be so interesting that I won't notice it anymore...
-
DDário Augusto Reiser
It's ok, that's the best way I can put it. It's ok, it's a little outdated in my opinion, using var instead of let and const, using document.documentElement.clientHeight instead of just using scrollY. The course focuses so much more on the math side of things and capturing mouse movements and inputs rather than parallax. Yeah, we build 2 parallax examples and then an entire project, but it's rather basic regarding the parallax effect. The course lacks oomph, it could've been so much more, could've shown how CSS can enhance parallax and how you can create it with CSS or more dynamic javascript and modern used parallax. Like even for 2019 the example of parallax just isn't all that impressive, I feel the code was so much more complex than the actual example that was shown which was pretty underwhelming. The course is called Demystifying Parallax: Learn to create interactive web pages, yet parallax is still not demystified and you do not how to create interactive web pages just examples of parallax instances in the most basic way. It promises so much but offers so little. After this course, you will not learn how to create interactive web pages. You'll know how basic parallax works and can be used in a specific way but other than that, you're lost, man. The course as a whole just desperately needs to be updated. It's not a bad course by any means, the instructor clearly knows his code and how to code and code well, and you will absolutely learn something, but with that said, there is just SO much better out there. Until it is updated and made more expansive and with more content, I'm sorry, I'm not trying to be harsh but it's just not really worth the money.
