teaching machines

CS 318: Lab 14 – Viewport Parallax

March 26, 2018 by Chris Johnson. 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:

• Take quiz 4. A link was sent to you today.
• Our midterm exam will be Wednesday, March 28. The exam will be very similar to the one from the spring 2017 offering of this class. In fact, your strategy for studying is to complete that exam.

See you next time!

Sincerely,

Lab

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:

• Place all work in a lab14 directory.
• Add a partners.html and include your first names and last initials.
• Place your HTML in index.html and CSS in style.css.
• Be prepared to present your creation to a neighboring group at exactly 11:40 AM.
• Locate a few interesting images of high resolution connected to your theme.
• Create a div as the very first element of body to hold your first full-viewport image. But don’t use an img element; we’ll use the background-image property of the div in a moment. Instead, make the div a member of the full class. Give it a unique id.
• Add some placeholder content after the div.
• Create a CSS rule for class full. Size the div so that it fills the viewport. For units, we’ve seen px, %, em and pt. There’s also vw and vh, which are percentages of the viewport’s width and height, respectively. To make an element span 25% of the viewport, we’d set its width to 25vw.
• Create a CSS rule for just that div using its id. Set its background image. The image should fill the screen, but scroll up as the other content shoves it offscreen. Confirm this.
• Augment the CSS for class full to tweak the image’s properties. Set the background’s size to cover so that it fills the div completely. Adjust the position so that its centered. Adjust background-attachment to fixed so that the image doesn’t move when its scrolled. Confirm that the image “sticks” as the content scrolls over it.
• Up until the last 10 minutes of class, add subsequent content related to your theme. You are encouraged to incorporate floats, box model tweaking, and media queries. Incorporate at least two other divs in class full and with unique ids and background images.

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.