Animated Sticky Navbar

The first challenge I did was Challenge 24 where the goal was to create a sticky navbar that, when scrolled down far enough, would slide out a space for a logo (which I have occupied with a picture of Gudetama). There is also a slight animation where the main body text would pop into place and expand slightly when the stickiness of the navbar activates. That plus the shadow effects on everything was really cool. I hated how they uppercased the menu items so I changed that as well. Otherwise, I tweaked some small details like sizing and position of certain elements. I appropriated the page layout from the tutorial to host all three challenges for this assignment.

Img Slide-in on Scroll

My next choice is Challenge 13 where the goal is to have images slide in whenever they scroll into view and scroll out when they're now longer being looked at. Like the other two, I chose this because I thought it would be useful for me in the future and a feature I could use in my future designs. I love this one in particular because it makes things seem more organic and flowy (I hate the flat trend).

I can see how if you vary the slide-in speed and such, you can create some personality, such as a fast slide-in for urgency or even something like an abrupt slide-down to suggest weight.

The big problem with this challenge is that the animation isn't the most reliable. Even the original solved file from the tutorial have some trouble having the pictures come in consistently too. I think the fact that the code was adapted to a webpage with other competing elements and styles also messed it up a little. I did not manage to find a way to fix it.

Text Shadow Effect

The last challenge I did was Challenge 16 where the goal is to create a shadow effect that moved with the user's mouse movements. I changed the end result so that there would be four shadow layers of varying shades of red that are locked on the y-axis and move in the opposite left and right directions of the user's mouse. Thought it was a pretty cool effect especially since the text color was set to white so it looks like it's popping out of the background. (You can also type in the container and change the text shadow.)