Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Parallax in HTML, CSS and JavaScript Tutorial - Let's Make It Happen

DesignCourse via YouTube

Overview

Learn how to create a stunning parallax effect using HTML, CSS, and JavaScript in this comprehensive tutorial. Discover the power of Laxxx.js, a lightweight 3kb solution for implementing parallax scrolling. Follow along as the instructor transforms a Figma prototype into a fully functional web page with dynamic, eye-catching parallax elements. Explore essential concepts such as CSS positioning, media queries, and JavaScript implementation. Gain hands-on experience in applying parallax effects to various page elements, including paragraphs, lines, headers, and images. Perfect for mobile-first design, this tutorial provides practical insights into creating engaging, interactive web experiences. By the end, you'll have the skills to bring depth and dimension to your web projects using parallax techniques.

Syllabus

Intro
CSS Code
Position Absolute
HTML Element
Paragraph Element
Line Element
Header Element
H2 Element
Media Queries
Lac CAS
Preserve Nature
Apply Parallax
Parallax Parameters
Mountains
Scroll
Outro

Taught by

DesignCourse

Reviews

Start your review of Parallax in HTML, CSS and JavaScript Tutorial - Let's Make It Happen

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.