Today’s goal:

• Continue learning jQuery, a very useful JavaScript library

 Today’s featured website:

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

 jQuery practice (continued from Monday)

• OK, we’ve interacted with a hyperlink. Let’s try something else. Create a class called .box in your style sheet. Give it height of 250px, a width of 300px, and a background-color of pink. Now, go into your HTML and add div class=”box” and close the div tag.
• We’re going to make this box disappear and then come back again use jQuery’s hide and show APIs. Let’s start with hide. We’re going to select our box and make it hide after a certain amount of time (milliseconds). Then we’ll bring it back. Also try changing hide to slideUp and show to slideDown to see what happens. Then try fadeOut and fadeIn in place of slideUp and slideDown and change the timing to slow it down.
• Let’s copy the code and paste it below and then comment out the first line. We’re going to now animate the box. You can add any CSS property here, which can give the box a whole range of animated effects. For example, let’s make it bigger. Change fadeOut or whatever you had to animate then add parenthesis, a curly bracket, height: “300px”, closed curly bracket, comma, space, 300 for a duration, and close the parenthesis.

 Parallax- jQuery and CSS scrolling background effect

• We are going to spend the rest of this class and Wednesday’s class on making 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), rimmellondon.com, etc (check out some more here if you want).
• To begin:
  1. Open Notepad++ and set up a basic page (opening and closing html, head, title, and body tags).
  2. 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/2.2.2/jquery.min.js">
     </script>
     

  3. Add opening and closing style tags to your head section.
  4. In your script tags, add jQuery’s document ready code from here under Launching Code on Document Ready. Copy the code snippet that includes “your code here.”
  5. Now, add this Google font below your title tag.

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

  6. Download this background image and this Superman image
  7. Add this code to your style sheet and add this html to your body section.