Today’s goal:

• Learn about creating a parallax scrolling effect with jQuery and CSS

 Today’s featured website:

• http://www.cabletv.com/the-walking-dead– A very creative use of parallax scrolling (horizontally)

 What is parallax?

• Let’s watch the first few minutes of this video
• Let’s check out the examples from the video (links below the video). Some of the sites have changed since this video was published 2 years ago so we’ll only consider the ones that still use parallax.
• What do you notice?
• Questions: Is the parallax effect always the same on each page? How is it different?

 Parallax- jQuery and CSS scrolling background effect

• We are going to create a parallax background for a webpage. This web development technique is hugely popular and can be achieved by using CSS for the fixed background and jQuery for the interaction with scrolling.
• Here are some good parallax examples: pixlr.com, Spotify (a trend-setter with Parallax), “Scroll for your health“, “Highway 1 road trip“, Mario (one of our featured sites), etc (check out some more here if you want).
• What we’re using today: jQuery’s animate, scroll, and CSS API’s
• To begin:
  1. Create a new folder somewhere on your computer and call it parallax. We’re going to save the webpage and images you need in this folder.
  2. Open Notepad++ and set up a basic page (opening and closing html, head, title, and body tags).
  3. At the bottom of the page, before the closing body tag, add the CDN link for jQuery

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

  4. Add opening and closing style tags to your head section.
  5. In your script tags, add jQuery’s document ready code (look at your recent jQuery code page for help)
  6. Now, add this Google font below your title tag.

     <link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
     

  7. Download this background image and this Superman image
  8. Add this code to your style sheet and add this html to your body section.
  9. Download this jQuery code to make Superman fly up and to the left slowly when you scroll. Put it below your document ready statement in your script tags. We are animating Superman and making him move by using relative values with jQuery. We have connected the animation that makes Superman move to the scrolling of the page (window).
  10. Watch what happens to Superman when you scroll. Try making him move faster and then try making him move slower.
  11. Now see if you can make him move to the right. What happens if you change top to bottom?
  12. Now we’re going to change the background-color and image of the scroll-block as we scroll to add to the parallax effect. We can do this by using jQuery’s CSS API, which basically is adding the background image when we scroll.
  13. Begin by downloading and saving this image to the same location as the rest of your files.
  14. Now download this code and let’s fill in the blanks