CS 318: Lab 14 – Viewport Parallax
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!
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
lab14directory. - Add a
partners.htmland include your first names and last initials. - Place your HTML in
index.htmland CSS instyle.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
divas the very first element ofbodyto hold your first full-viewport image. But don’t use animgelement; we’ll use thebackground-imageproperty of thedivin a moment. Instead, make thediva member of thefullclass. Give it a uniqueid. - Add some placeholder content after the
div. - Create a CSS rule for class
full. Size thedivso that it fills the viewport. For units, we’ve seenpx,%,emandpt. There’s alsovwandvh, 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 to25vw. - Create a CSS rule for just that
divusing itsid. 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
fullto tweak the image’s properties. Set the background’s size tocoverso that it fills thedivcompletely. Adjust the position so that its centered. Adjustbackground-attachmenttofixedso 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 classfulland with uniqueids 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.