scroll 에 따라 이미지 FadeIn 효과

April 26, 2023

CSSJavaScript

<style>
  .fade {
    filter: blur(15px);
    transition: filter 0.3s linear 0s;
  }
</style>

<html>
  <img class="fade" src="https:....."alt="....">
  <img class="fade" src="https:....."alt="....">
  <img class="fade" src="https:....."alt="....">
    ...
    ...
</html>

<script>
  $(window).scroll(function () {

    $('.fade').each(function (i) {

      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      if (bottom_of_window > bottom_of_object) {
        $(this).css("filter", "none")
      }
    });
  });
</script>

css 속성중 filter 속성을 이용하면 간단하다. 제이쿼리를 이용해 간단히 구현했지만 추후 옵저버를 이용해 리펙토링 코드도 남겨놓겠다.

이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기→