Senior Design Progress Blog 3

This week was all about the code code code:

I've started implementing the navigation functionality of my website. I found an awesome scrolling library for parallax scrolling & animation called skrollr that looks really cool and is going to be really useful for some of the animation/interactive storytelling ideas that I have. (I want animations to play as the user scrolls, not just when the user is finished scrolling, and this library will help me achieve this) I also did a TON of research into continuous page scrolling with a nav bar that allowed the user to jump between pages. I incorporated onepage-scroll, sectionMenu, and fullPage.js, but was unsatisfied with all three, so I decided to just implement the whole thing myself. I did a little research about sticky nav bar implementations and jQuery's animate function and I'm very happy with my preliminary results. I'm also able to keep track of what page (specifically what node class has the class "active") the user is currently in without changing the url. I made a little screengrab video to show what it looks like right now. (The change in background color represents a different page)

Just demonstrating some scrolling animation, nav bar, and pseudo login functionality. Ada Lovelace's face is just a placeholder image to show what node is currently active.

I also did a whole lot of research on webpack to try to use require modules for my app, since they aren't working with express on the client side and I'm still trying to figure it out. I'm using closure in the mean time, which is working fine.