When looking for instructions on how to accomplish something in Javascript I inevitably find that someone else has already found a solution. But when I try to figure out how they did it, all I see is a wall of sparsely documented code that seems like overkill for the problem I'm trying to solve.

For this profile page I wanted two things:

A push-down menu for mobile users. Smooth scrolling transitions for anchor links. I wanted to figure out how Javascript could be used to accomplish these things, and since I found no solutions I understood I had to figure out how to write the code myself, rather than copy and paste and learn nothing. I chose to avoid jQuery and to accomplish these effects with the simplest code possible.

Once I had it figured out, I had to share it with my classmates and so I produced these CodePens:

  1. Mobile push-menu using only CSS
  2. Mobile push-menu with JavaScript
  3. Smooth Scrolling Anchor Links

Having accomplished these tasks I decided I needed to take on writing a parallax script:

  1. Parallax effect

None of these solutions are perfect and they all needed a bit of tweaking and massaging to implement them on this webpage and to maximize browser compatibility, but I learned a lot in having written these solutions myself in vanilla Javascript.

Note to self: The scroll transition is still buggy in Safari.