JavaScript30 — Day 13

Learning how to slide images in on the scroll event!

  • The window.scrollY function, when logged to the console, can tell you how far you’ve scrolled down a webpage in pixels. Throughout this project, I feel like I gained a lot of familiarity with logging browser events related to page position. We had to use a few math equations to determine when (or rather, where) on the page events should be triggered, which involved using a lot of built-in window properties.
  • This project made me realize that, in writing my pseudocode, I’m still not thinking quite like a computer would… mainly in the sense that I’m not breaking operations down as far as they need to go. Pictured below, you can tell that I knew we’d need to apply CSS properties to images when the scroll event was triggered, but I didn’t think through all the equations we’d need to write to determine the browser position in the first place.
  • Related to my first blindspot, I want to learn more about properties like “offsetTop”, which we used to calculate the bottom of an image position.

Creative person using her brain to learn how to code.