JavaScript 30 — Day 13 —Slide In On Scroll
Another quick exercise for Day 13. We are trying to replicate a slide in effect on window scroll. This can be a fun effect if used in moderation.
Wes included all the CSS with the photos hidden and we just needed to add the JS to tell the images at what scroll height to slide in so that we could add the appropriate class to the img elements.
Wes walks us through an effect where, once you get halfway down an image on the page it slides in and vice versa when scrolling up from the bottom. He also included the effect of having it slide back out when you pass it. I’m usually a fan of having the load just the one time and stay that way, otherwise it gets a little annoying.
Honestly it’s mainly just a single function and an event listener on the window to listen for the scrolls. The biggest challenge of this exercise is trying to conceptualize the math, the window and image properties you can use, and what you want out of the functionality.
It does give a page a little bit of interactivity to it which is nice.
I won’t pretend like I was able to create it from scratch without his guidance but now I understand what is happening mathematically and logically.
Some things to note:
- Wes includes a debounce function for you. If you want to know a little more about debounce functions you can just Google it. Here’s a pretty good article on it at freeCodeCamp.
- While it is always good to try and figure some things out from scratch there are often packages or libraries where others have done those things for you. If you want to add a fun slide or other cool animations, take a look at the Animate On Scroll library started by Michał Sajnóg. Michał is part of the Vue.js Core team which is some pretty fun trivia.
