DISCOVER PARALLAX

Parallax Demo

Parallax is defined as the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g. through the viewfinder and the lens of a camera. In the instance of web development and parallax scrolling, the effect is defined as an instance where the background images move slower than the foreground images or elements. In this case, the images move at a slower rate than the div classes that surround the top and bottom of each image.

Smooth Scrolling.

Skills learned:

With this learning plan, I had learned the following:

Parallax

  • Formatting images to fill the width of the screen
  • Creating divs with unique styling to be placed between the images
  • Adjusting the text styling and image opacity to achieve higher contrast
  • Disabling parallax scrolling on mobile devices for better viewing experience.

Monochrome

  • Image Filters and how to apply them to achieve a monochrome effect
  • Utilizing Dark Mode knowledge to apply a different effect to the website
  • Adjusting CSS for futher definition on text and increating legibility

Miscellaneous

  • Adding ID Links to have the user "jump" to topics from the navbar
Eye-catching design.

Testing:

For this website I tested it on the following devices:

  • Dell Latitude E7440, Windows 10: Mozilla Firefox, Chromium Edge
  • Microsoft Surface Pro: Mozilla Firefox, Chromium Edge
  • Samsung Galaxy S10, Android Oreo, Chrome
  • iPhone X, iOS 14, Safari
Synergy in motion.

Reflection:

This assignment was very enlightening. Either CSS is becoming easier for me to grasp, or Parallax Scrolling is a relatively simple effect to achieve. Either way, parallax scrolling is a nice and effective way to introduce images and simplify your messaging through way of minimalism. I also learned a fair bit about the importance of accesibility options with the resource provided by Tutsplus (linked below). In this regard, I utilized the knowledge from the last student choice project in Dark Mode to make a Monochrome Mode, which desaturates the color and increases contrast for better text legibility against the images and div elements. Regarding Web Standards, this page is verified using the Web Accessibility Evaluation Tool (WAVE) with 0 Errors, 0 Contrast Errors, and 0 Alerts. You can see your yourself by clicking this link: WAVE Tool Evaluation for Parallax Demo

References