JavaScript 30- Day 13 Study Notes

https://javascript30.com/

Day 13 of JavaScript 30, a course by Wes Bos, showed the interaction between CSS and JavaScript. It involved getting images to slide into place as you scrolled down the page.

First, we collected our images from HTML.

const sliderImages = document.querySelectorAll('.slide-in');

Now, Bos used a single function with several calculations in it to produce the effect.

function checkslide(e){
sliderImages.forEach(sliderImage => {
//slide in when cursor is halfway point of image location.
   const slideInAt = (window.scrollY + window.innerHeight) sliderImage.height / 2;
// scrollY is px from top of view. innerHeight is px of view.
// subtract 50% of image height so slide in there
// calculate location of bottom of image
   const imageBottom = sliderImage.offsetTop + sliderImage.height;
//offsetTop is px from top of image to top of page
//add image height to get px to bottom
   const isHalfShown = slideInAt > sliderImage.offsetTop;
//slide in when scrolled past 50%
//toggle image in or out of view. 'active' affects CSS transition settings
   const isNotScrolledPast = window.scrollY < imageBottom;
   if(isHalfShown && isNotScrolledPast){
      sliderImage.classList.add('active');  
   }else {
      sliderImage.classList.remove('active');
   }
});

This program produced a cool effect on the screen. The math was not complicated, yet required some thinking and visualization in my head.

Follow my study notes as I progress through JavaScript 30.

JavaScript 30–01 Drum Kit

JavaScript 30- Day 8 Study Notes