Category Archives: Front End Development

Parallax Scroll with CSS

My first portfolio project will be FreeCodeCamp’s “Tribute page”, the first project in their beginner Responsive Web Design track.

It’s a fairly simple web page, and it would be pretty easy to create a minimal solution that fulfills all the requirements. But if I’m going to add it to my portfolio, I want something at least a little better than the minimum, so I’ve been thinking about ways to improve the look of the page.

Parallax scrolling is where two or more elements on a web page move at different speeds when the page is scrolled (vertically or horizontally). It’s a little gimmicky, I suppose, but I think it will work for this project.

The Google Web Developers December 2016 Updates (blog) had an article titled Performant Parallaxing that explained how to implement parallax scrolling using CSS that works cross-browser.

It looks like it should be pretty simple to add to my first portfolio project. And since I currently work for Google and plan to use Google Maps Platform examples in my later portfolio works, using their parallax scrolling solution for a non-Google portfolio project seems appropriate. However, the article was written in 2016, so it may require changes to work with current browsers.

Web Development and UX Portfolio project ideas

  • Google Places Autocomplete – select a city, then search within that city’s bounding rectangle (requires updating the AutocompleteOptions dynamically)
  • Shopping list (PHP backend? Google Cloud? Heroku? Netlify?)
  • Exercise tracker (PHP / Heroku / GCloud / Netlify backend?)
  • Mixed-mode transportation search – combine Google Maps Platform and CapMetro APIs to find the closest bus route when the start or finish is outside CapMetro’s service area.
  • Build a proxy server for Google Maps web service APIs, like Raymond Camden’s article on using Pipedream to build a proxy server for APIs. This CSS-Tricks article talks about other ways to build proxies with serverless functions (such as, perhaps, Google Cloud Functions)
  • Interactive Club Finder for Toastmasters (using Google Dynamic Maps)