Today’s goal:

• Add a parallax visual effect to your webpage using CSS and jQuery

 Today’s featured website:

• http://nasaprospect.com/– This parallax site was designed by students at the University of South Dakota

 Parallax- jQuery and CSS scrolling background effect

We’re going to use jQuery and CSS to create a parallax visual effect to your webpage.

1. Make your background image stay in place and have the content school on top of it by adding background-attachment: fixed; to your body in your style sheet. Launch your page.
   What happens to your word now?
2. To increase the parallax effect, we’re going to create more content that “rises over” the text and background image. Add .content1 to your style sheet and give it a height of 900px and a background-color of yellow. Now add opening and closing div tags in your HTML with a class of content1 below the h1 with your word.
3. Create another class and call it .content2. Add this code to .content2. Then add div tags with a class of content2 below your other div tags. Add the word “Relaxed” and put h1 tags around it.
4. Add a class called .hidden in your style sheet and add visibility: hidden;. Then apply the class to your h1 tags in content2 around the word “Relaxed.” You are hiding this word and are going to make it come back later with jQuery.
5. Add the CDN link for jQuery in your head section

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
   </script>
   

6. Add opening and closing script tags right below the jQuery CDN link.
7. Add this code inside the script tags. We’re going to have some changes happen when we scroll the page, similar to our Superman page.
8. Copy and paste the content1 code block right below it in our jQuery. Change content1 to content2. Let’s change the background-image to this source https://www.mhswebdesign.com/storage/2017/05/ocean.jpeg.
9. Begin a new line of jQuery code by selecting the .hidden class. Then add the CSS API. Let’s change the visibility to visible.
10. Copy and paste the .content1 class in your style sheet below .content2. Change the name to .content3.
11. Add some div tags below everything in your HTML and give them a class of content3.
12. Let’s change the background-color of content3 to lightblue and its opacity to 0.5 in our jQuery.
13. Add your word inside h1 tags inside the content3 div.
14. Let’s make our h1 disappear when we click on it by adding the right jQuery code.