teaching machines

CS 318: Lab 14 – Viewport Parallax

March 26, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Let’s shake things up a bit today. When game developers get together to build a game in a very short amount of time, they call that a game jam. We will have a web jam. I want to devote all of today’s lab time to that, so I won’t be doing any talking.

Here’s your TODO list:

See you next time!



Today we will have a “web jam.” Instead of giving you a particular page to try and recreate, you and your partner choose a theme, and make a page that fits the theme in some way.

We do impose one learning goal, inspired by some of your questions. Many sites these days start off with images that entirely fill the viewport. As the viewer scrolls, the image appears to stick, either scrolling more slowly than the content below or not scrolling at all. For example, scroll over the web page for musician Nils Frahm.

We move the background more slowly than the foreground to simulate parallax—which is the phenomenon that scenes look different when we look at them from different angles. Parallax gives the page a sense of depth. There are several ways to achieve parallax in common use. Some require Javascript; others require some non-trivial CSS. We are going to start with a non-crazy method. (Feel free to pursue more advanced approaches in your client project.)

Follow these steps:

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab14 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.