From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Parallax scroll effect

Parallax scroll effect - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Parallax scroll effect

“

- [Chris] Hi, this is Chris Converse, and in this episode we'll create a Parallax scrolling effect using only CSS. So if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in a text editor. So when you have the HTML file open in a text editor and the webpage open in a browser, you'll see we have a pretty simply layout in place here. Over in the browser I can just simply scroll through this content. You'll need to make sure that you have enough content to invoke scrolling for this effect to work. And over in the HTML code we can see that we simply have a main element with a header and a section element. And the photo that you're seeing over here is actually a background image that's being assigned to the header element. So to begin creating our Parallax scrolling effect, let's go back to the exercise files, let's find style.css, let's open this in our text editor, and with this open let's scroll down. We're looking for the rule that targets…

Contents