Learning how to slide images in on the scroll event!
- Debounce functions work with any scroll-related event listeners, and as a rule should be used in tandem with them. Why? Since “scroll” is an event that occurs many times (and rapidly) as you navigate up or down a webpage, it can become a performance issue to fire an event related to scroll every single time it’s triggered. Debounce moderates how often the scroll event fires! In this project, the lead dev simply grabbed a debounce function from a web search, which I’m sure I’ll need to use at a later date.
- 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.
We write “-secretCode.length -1” when working with array.length() because: arrays are “zero-based” data structures, meaning each element in an array is given an index number, and the first array element’s index is “0”. The .length() method, however, is “one-based”, meaning it tallies all items in a given array, regardless of the index position they’re in. When it comes to .length(), we’ll be returned the total number of elements in a group, not the summation of their index numbers.
We subtract one from the array’s length in order to make sure the returned value is an actual element that exists, as the elements that exist in the array will always be one less than the array’s length.
What I am still stuck on is the purpose of the “-” in front of the array.length(). Waiting to hear back from some coding buddies on this!