JavaScript 30- День 13 Учебные заметки

День 13 курса JavaScript 30 Веса Боса показал взаимодействие между CSS и JavaScript. Это включало в себя получение изображений, которые скользили на место, когда вы прокручивали страницу вниз.

Сначала мы собрали наши изображения из HTML.

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

Теперь Бос использовал одну функцию с несколькими вычислениями для создания эффекта.

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');
   }
});

Эта программа произвела классный эффект на экране. Математика не была сложной, но требовала некоторого размышления и визуализации в голове.

Следите за моими учебными заметками по мере того, как я продвигаюсь по JavaScript 30.