Today’s goals:

• Finish creating a parallax scrolling effect with jQuery and CSS
• Begin a new parallax scrolling page

 Today’s featured websites:

• Parallax showcase:
  • http://www.firewatchgame.com/
  • http://makeyourmoneymatter.org/
  • https://www.spaceneedle.com/home/
  • http://graphicnovel-hybrid4.peugeot.com/start.html

 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

 Create a new parallax scrolling page

You’re going to begin a new parallax scrolling page when you finish with our Superman example. Today you’re only going to create a page with a background image, like the example below. You are going to use CSS and HTML to create your page and will add jQuery later.

After you create this, you will add some parallax visual effects in the next class.

First, do these things:

1. Choose a word: think about words that inspire you and words that you could easily find an image to communicate its meaning. For inspiration, go here.
2. Choose an image that visually conveys the meaning of your word: https://unsplash.com/, https://www.pexels.com/, Bing.com (do image search, then search for free to share and use). Make sure you choose an image that is at least 1200 pixels wide.
3. Set up a new page in Notepad++ with opening and closing html, head, title, style, and body tags.
4. Add body and h1 to your style sheet inside your style tags.
5. Add your background image to your webpage. Go here for the code (it’s been awhile since you’ve done this) and copy background-image, background-repeat, and background-position to your body in your style sheet. Change the value for background-image to the name of your image. Change background-repeat to no-repeat. Change background-position to center.
6. Style your h1. Choose a color that goes along with your image (go here for colors). Make it large by adding font-size: 90px (you might want to adjust this after picking a font). Add text-align: center; so your word will be centered. Finally, consider adding a text-shadow (see here) to make it stand out against your image.
7. If you want to move your h1 down from the top of the page, add margin-top: 15%; and play around with the value until you get something you like. You can also use pixels rather than percentage.
8. Type your word in your body section and put opening and closing h1 tags around it.
9. Select a Google Font that seems to go along with the meaning of your word. Go here and when you find a font you like, click on the plus sign. Copy and paste the link to the font in your head section and then copy and paste the font-family code into your body section in your style sheet.
10. Review your page and make any visual adjustments. Should your font-size be larger or smaller? Should you choose another color for your font? Should you choose another Google font? Should you move your word further up or down the page? Do you need a background-color if your image doesn’t fill the page enough?