jQuery

Class Tuesday, May 24, 2016

 Today’s goals:

  • Continue learning jQuery, a very useful JavaScript library
  • Begin looking at mobile apps

 Today’s featured website:

  • http://www.madwell.com/– This site’s parallax design is so visually engaging, you’ll want to keep scrolling

 This week’s schedule

  • Tuesday- jQuery
  • Thursday- mobile apps
  • Next Tuesday- senior’s last class!

 Parallax- jQuery and CSS scrolling background effect (from Wednesday)

  • 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), 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.
    8. 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.
    9. Watch what happens to Superman when you scroll. Try making him move faster and then try making him move slower.
    10. Now see if you can make him move to the right. What happens if you change top to bottom?
    11. Now we’re going to change the background-color and image of the scroll-block as we scroll to add to the parallax effect.
    12. Begin by downloading and saving this image to the same location as the rest of your files.
    13. Now download this code and let’s fill in the blanks

 When you’re done…

  • Write down two or three of your favorite apps and why you like them so much.
  • Look at YouTube.com and then take out your phone and go to YouTube. What did you do to get there? Did you go right to the app or open the browser first? What happened if you open the browser?
  • Go to the Cool Stuff page and check out the Apps category.
  • Think about, and/or Google– what is the difference between an app and a website? When would you develop one or the other? Why would you consider making an app instead of just a responsively designed website?