[JS] sticky와 투명도를 이용한 스크롤 효과

① HTML

<script src="https://unpkg.com/@studio-freight/lenis@1.0.32/dist/lenis.min.js"></script> 

<div class="etc"></div>
<div class="full_wrap">
  <div class="left">
    <div class="img_wrap">
      <div class="conts">
        <img src="https://www.champodonamu.com/inc/img/sub/mission_img04.jpg" alt="" class="sticky-image">
        <img src="https://www.champodonamu.com/inc/img/sub/mission_img03.jpg" alt="" class="sticky-image">
        <img src="https://www.champodonamu.com/inc/img/sub/mission_img02.jpg" alt="" class="sticky-image">
        <img src="https://www.champodonamu.com/inc/img/sub/mission_img01.jpg" alt="" class="sticky-image">
      </div>
    </div>
  </div>
  <ul class="right">
    <li class="txt_box">
      <p class="sub">Amenity</p>
      <h3>안락한 생활의 편의시설</h3>
      <p class="txt">환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해
        항상 안락함과 편안함을 제공하는 병원이 되도록 최선을 다하겠습니다.</p>
    </li>
    <li class="txt_box">
      <p class="sub">Amenity</p>
      <h3>안락한 생활의 편의시설</h3>
      <p class="txt">환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해
        항상 안락함과 편안함을 제공하는 병원이 되도록 최선을 다하겠습니다.</p>
    </li>
    <li class="txt_box">
      <p class="sub">Amenity</p>
      <h3>안락한 생활의 편의시설</h3>
      <p class="txt">환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해
        항상 안락함과 편안함을 제공하는 병원이 되도록 최선을 다하겠습니다.</p>
    </li>
    <li class="txt_box">
      <p class="sub">Amenity</p>
      <h3>안락한 생활의 편의시설</h3>
      <p class="txt">환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해
        항상 안락함과 편안함을 제공하는 병원이 되도록 최선을 다하겠습니다.</p>
    </li>
  </ul>
</div>
<div class="etc"></div>

 

② CSS

* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; }
.etc { height: 50vw; background-color: #f2f2f2; }
.full_wrap { position: relative; display: flex; width: 1080px; margin: 0 auto; }
.full_wrap .left { position: sticky; top: 0; height: 100vh;   width: 50%; }
.full_wrap .left .img_wrap { transform: translateY(-50%); top: 50%; position: relative; }
.full_wrap .left .img_wrap .conts { background-color: #fff; height: 320px; border-radius: 20px; position: relative; overflow: hidden; }
.full_wrap .left .img_wrap .conts img {width: 100%; position: absolute; transition: opacity 0.5s ease-in-out; }
.full_wrap .right { margin-left: 40px; width: 50%; margin-bottom: 425px; }
.full_wrap .right .txt_box { margin-top: 240px; transition: opacity 0.5s ease-in-out; opacity: 1; }
.full_wrap .right .txt_box:first-of-type { margin-top: 245px;}
.full_wrap .right .txt_box .sub { font-size: 18px; margin-bottom: 1rem; }
.full_wrap .right .txt_box h3 { font-size: 32px; margin-bottom: 1.5rem; }
.full_wrap .right .txt_box .txt { font-size: 14px; }

 

③ JS

document.addEventListener('DOMContentLoaded', () => {
  // Lenis 초기화
  const lenis = new Lenis({
    duration: 1.5,
    orientation: 'vertical',
    smoothWheel: true,
    smoothTouch: false,
    touchMultiplier: 2
  });

  // Lenis 애니메이션 루프 설정
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);

  // 이미지와 텍스트 요소 선택
  const images = document.querySelectorAll('.sticky-image');
  const textBoxes = document.querySelectorAll('.txt_box');
  
  // 각 텍스트 박스의 오프셋 위치 계산 (한 번만 계산)
  const textBoxOffsets = Array.from(textBoxes).map(box => {
    return box.getBoundingClientRect().top + window.pageYOffset;
  });

  // 초기 상태 설정: 첫번째 이미지만 보이게, 텍스트 박스는 모두 투명도 0.1
  images.forEach((img, index) => {
    if (index === 0) {
      img.style.opacity = 1;
    } else {
      img.style.opacity = 0;
    }
  });

  textBoxes.forEach(box => {
    box.style.opacity = 0.1;
  });

  // 스크롤 이벤트 핸들러
  function handleScroll() {
    const scrollPosition = window.scrollY;
    
    // 활성화할 텍스트 박스와 이미지 인덱스 찾기
    let activeIndex = -1;
    
    textBoxOffsets.forEach((offset, index) => {
      const activationPoint = offset - 400; // 텍스트 박스 위치 - 400px
      
      if (scrollPosition >= activationPoint) {
        activeIndex = index;
      }
    });
    
    // 스크롤 위치에 따라 활성화할 요소 업데이트
    if (activeIndex === -1) {
      // 스크롤이 첫 번째 텍스트 박스 활성화 지점보다 위에 있으면 초기 상태 유지
      resetAllElements();
    } else {
      // 해당 인덱스의 요소 활성화
      updateElements(activeIndex);
    }
  }

  // 초기 상태로 리셋
  function resetAllElements() {
    images.forEach((img, index) => {
      img.style.opacity = index === 0 ? 1 : 0;
    });
    textBoxes.forEach(box => {
      box.style.opacity = 0.1;
    });
  }

  // 활성화할 요소 업데이트
  function updateElements(activeIndex) {
    // 모든 이미지 숨기고 활성화할 이미지만 표시
    images.forEach((img, index) => {
      img.style.opacity = index === activeIndex ? 1 : 0;
    });
    
    // 모든 텍스트 박스 투명도 0.1로 설정하고 활성화할 텍스트 박스만 투명도 1로 설정
    textBoxes.forEach((box, index) => {
      box.style.opacity = index === activeIndex ? 1 : 0.1;
    });
  }

  // 스크롤 이벤트 리스너 등록 (Lenis와 함께 작동하도록)
  lenis.on('scroll', handleScroll);
  
  // 윈도우 리사이즈 시 텍스트 박스 오프셋 다시 계산
  window.addEventListener('resize', () => {
    textBoxOffsets.length = 0;
    textBoxes.forEach((box, index) => {
      textBoxOffsets[index] = box.getBoundingClientRect().top + window.pageYOffset;
    });
    handleScroll();
  });
  
  // 페이지 로드 시 초기 상태 계산
  handleScroll();
});

 

④ Codepen

See the Pen [html/css/js] sticky 이미지와 텍스트 활성화 스크롤 효과 by TytanLee (@TytanLee) on CodePen.

코드펜은 오른쪽 상단의 로고를 눌러 전체페이지에서 보는 걸 추천드립니다.

 

1. 'lenis' 라이브러리 사용으로 부드러운 스크롤 효과 연출.
2. sticky 이미지는 두 개의 `div`로 감싸기.
   첫 `div`는 `sticky`를 주기 위해, 두 번째 `div`는 페이지의 중간에 이미지를 고정하기 위해.
3. 이미지 변경과 텍스트 투명도 활성화의 기준은 텍스트 박스가 상단으로부터 떨어진 위치값px - 400px.
4. 나머지 기능은 생성 AI로 제작.

원본 코드는 참포도나무병원 사이트를 참고했습니다.