스크롤 시 특정 컨텐츠 아래에서 위로 올라오는 효과(+fade in)

 

 

 

 

 

transform으로 밑으로 보냄, opacity로 덜 지저분하게 함

.fade-in-element{border: 1px solid #E4E4E4; position: relative; opacity: 0;

   transform: translateY(100px);

   transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;}

 

 

같은 클래스 명 2개가 같이 동시에 올라와야 하는 상황

<script>

document.addEventListener("DOMContentLoaded", function() {

  // Get the elements you want to fade in

  var fadeElements = document.querySelectorAll('.fade-in-element');

  // Function to check if an element is in the viewport

  function isElementInViewport(el) {

    var rect = el.getBoundingClientRect();

    return (

      rect.top >= 0 &&

      rect.left >= 0 &&

      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&

      rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );

  }

  // Function to handle the scroll event

  function handleScroll() {

    fadeElements.forEach(function(element) {

      if (isElementInViewport(element)) {

        element.style.opacity = 1;

        element.style.transform = 'translateY(0)';

        // Optionally, you can remove the event listener for each element as it becomes visible

        // window.removeEventListener('scroll', handleScroll);

      }

    });

  }

  // Attach the scroll event listener

  window.addEventListener('scroll', handleScroll);

  // Check for visibility on page load

  handleScroll();

});

</script>