CS 318: Lab 14 – Viewport Parallax
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!
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.
Follow these steps:
- Place all work in a
- Add a
partners.htmland include your first names and last initials.
- Place your HTML in
index.htmland CSS in
- 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 of
bodyto hold your first full-viewport image. But don’t use an
imgelement; we’ll use the
background-imageproperty of the
divin a moment. Instead, make the
diva member of the
fullclass. Give it a unique
- Add some placeholder content after the
- Create a CSS rule for class
full. Size the
divso that it fills the viewport. For units, we’ve seen
pt. There’s also
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
- Create a CSS rule for just that
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
fullto tweak the image’s properties. Set the background’s size to
coverso that it fills the
divcompletely. Adjust the position so that its centered. Adjust
fixedso 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
fulland 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.