Newer
Older
zikken / jdweb / web-master / testpage / fade.js
@houtin houtin on 22 Feb 2022 1 KB add jdweb files
// $(function(){
//             $(window).scroll(function() {
               
//                 $('.fadein').each(function() {
                 
//                   let scroll = $(window).scrollTop();
                
//                   let target = $(this).offset().top;
             
//                   let windowHeight = $(window).height();
        
//                   if (scroll > target - windowHeight + 200) {
//                     $(this).css('opacity','1');
//                     $(this).css('transform','translateY(0)');
//                   }
//                 });
//               });
//             });


const ScrollContent = document.querySelectorAll('.scroll');
console.log(ScrollContent);
console.log('画面の高さ',window.innerHeight); 

document.addEventListener('scroll', () => { 

  for (let i=0; i < ScrollContent.length; i++){
    const ElementDistance = ScrollContent[i].getBoundingClientRect().top 
    + ScrollContent[i].clientHeight * .5;
    if (window.innerHeight > ElementDistance){ 
      ScrollContent[i].classList.add('show'); 
    }; 
  }
})