Sticky 속성을 활용한 스크롤 애니메이션 구현하기

 

Sticky 속성을 활용한 스크롤 애니메이션 구현 방법 기록

---

 

 

개인적으로 sticky 속성을 처음 사용해봤는데, 꽤 흥미로웠고 적용하는 과정에서 많은 것을 배웠습니다.

 

1. HTML 구조 설정
먼저, position: sticky를 적용할 HTML 구조를 설정해보겠습니다.

<template>
  <section id="section">
    <!-- infoData 배열을 순회하여 각 섹션을 생성 -->
    <div
      id="info__wrapper"
      class="row"
      v-for="(item, idx) in infoData"
      :key="idx"
    >
      <!-- 텍스트 영역, 다크 모드 적용 -->
      <div class="text" :class="{ dark: changeDarkMode }">
        <h3>{{ $t(item.title) }}</h3>
        <p>{{ $t(item.content) }}</p>
      </div>
      <!-- 이미지 영역, 불투명도 적용 -->
      <div class="sticky__img" :style="{ opacity: item.imgOpacityValue }">
        <img :src="item.image" alt="이미지1" />
      </div>
    </div>
  </section>
</template>

 v-for 디렉티브를 사용하여 infoData 배열의 데이터를 순회하며 각각의 섹션을 생성합니다. 각 섹션에는 텍스트와 이미지를 담고 있으며, 이미지는 sticky 속성을 통해 스크롤 시 고정됩니다.

 

2. 데이터 설정
다음으로, data 속성에 텍스트와 이미지를 담은 데이터를 설정합니다.

<script>
export default {
  name: "StickyInfo",
  data() {
    return {
      infoData: [
        {
          image: "./assets/images/sticky-1/RBLX_Carousel_1.jpg",
          title: "[4].stickyinfo.script-title1",
          content: "[4].stickyinfo.script-content1",
          imgOpacityValue: 0,
          textOpacityValue: 0.1,
        },
        {
          image: "./assets/images/sticky-1/Edu_Hub_Home_Desktop_06.jpg",
          title: "[4].stickyinfo.script-title2",
          content: "[4].stickyinfo.script-content2",
          imgOpacityValue: 0,
          textOpacityValue: 0.1,
        },
        {
          image: "./assets/images/sticky-1/RBLX_Carousel_3.jpg",
          title: "[4].stickyinfo.script-title3",
          content: "[4].stickyinfo.script-content3",
          imgOpacityValue: 0,
          textOpacityValue: 0.1,
        },
      ],
      imgNum: 0,
      scrollValue: 300,
    };
  },
  mounted() {
    // 컴포넌트가 마운트될 때 스크롤 이벤트 리스너 추가
    window.addEventListener("scroll", this.handleScroll);
  },
  computed: {
    changeDarkMode() {
      return this.$store.getters.fnGetDark;
    },
  },
  methods: {
    handleScroll() {
      // 스크롤 이벤트에 따라 이미지의 불투명도 조절
      let data = this.infoData;
      if (window.scrollY >= 1800 && window.scrollY < 2600) {
        data[0].imgOpacityValue = 1;
        data[1].imgOpacityValue = 0;
        data[2].imgOpacityValue = 0;
      } else if (window.scrollY >= 2700 && window.scrollY < 3600) {
        data[0].imgOpacityValue = 0;
        data[1].imgOpacityValue = 1;
        data[2].imgOpacityValue = 0;
      } else if (window.scrollY >= 4000 && window.scrollY < 4900) {
        data[0].imgOpacityValue = 0;
        data[1].imgOpacityValue = 0;
        data[2].imgOpacityValue = 1;
      } else {
        data[0].imgOpacityValue = 0;
        data[1].imgOpacityValue = 0;
        data[2].imgOpacityValue = 0;
      }
      if (window.scrollY < 1700) {
        data[0].imgOpacityValue = 1;
        data[1].imgOpacityValue = 1;
        data[2].imgOpacityValue = 1;
      }
      console.log(window.scrollY);
    },
  },
};
</script>

데이터에는 각각의 섹션에 대한 이미지 경로, 제목, 내용, 그리고 이미지의 불투명도 값을 포함하고 있습니다. 스크롤 이벤트를 통해 이미지의 불투명도를 변경하여 스크롤 애니메이션을 구현합니다.

 

3. CSS 스타일링

이제 sticky 속성을 사용하여 이미지를 고정시키고, 스크롤 애니메이션을 적용해보겠습니다.

#section {
  margin: 200px 0 200px;
  #info__wrapper {
    display: flex;
    padding: 50px 0;
    margin: 300px auto;
    color: rgba(255, 255, 255, 0.8);
    height: 842px;
    .text {
      display: flex;
      flex: 40%;
      flex-direction: column;
      justify-content: center;
      align-items: end;
      margin: 0 2rem 0 0;
      text-align: right;
      transition: all 0.3s;
      word-break: keep-all;
      h3 {
        font-size: 2rem;
        margin-bottom: 2rem;
        word-break: keep-all;
      }
      p {
        max-width: 400px;
        font-size: 1rem;
        word-break: keep-all;
      }
    }
    .sticky__img {
      flex: 40%;
      transition: opacity 0.3s ease;
      img {
        position: sticky; /* 스크롤 시 고정되는 위치 */
        top: 40vh; /* 뷰포트 높이의 40% 지점에 고정 */
        height: 350px;
        border-radius: 5px;
      }
    }
  }

position: sticky를 통해 이미지를 스크롤 시 고정시킬 수 있습니다.

이 속성은 요소가 뷰포트의 특정 지점에 도달하면 그 위치에 고정되게 만듭니다. 위 코드에서는 이미지가 뷰포트 높이의 40% 지점에 고정되도록 설정하였습니다.

 

4. position: sticky의 작동 원리

position: sticky는 특정 조건을 충족할 때 요소를 고정하는데 매우 유용합니다. 개인적으로 이번에 sticky 속성을 처음 써봤는데, 특히 스크롤 애니메이션을 구현할 때 굉장히 유용하다고 느꼈습니다. sticky 속성은 요소가 부모 컨테이너의 경계에 도달하거나 뷰포트의 지정된 위치에 도달할 때까지는 일반적으로 흐르다가, 그 위치에 도달하면 고정됩니다.

 

5. 스크롤 이벤트로 애니메이션 제어

스크롤 이벤트를 통해 이미지의 불투명도를 조절하여 스크롤 애니메이션을 구현했습니다.

mounted() {
  // 컴포넌트가 마운트될 때 스크롤 이벤트 리스너 추가
  window.addEventListener("scroll", this.handleScroll);
},
methods: {
  handleScroll() {
    // 스크롤 이벤트에 따라 이미지의 불투명도 조절
    let data = this.infoData;
    if (window.scrollY >= 1800 && window.scrollY < 2600) {
      data[0].imgOpacityValue = 1;
      data[1].imgOpacityValue = 0;
      data[2].imgOpacityValue = 0;
    } else if (window.scrollY >= 2700 && window.scrollY < 3600) {
      data[0].imgOpacityValue = 0;
      data[1].imgOpacityValue = 1;
      data[2].imgOpacityValue = 0;
    } else if (window.scrollY >= 4000 && window.scrollY < 4900) {
      data[0].imgOpacityValue = 0;
      data[1].imgOpacityValue = 0;
      data[2].imgOpacityValue = 1;
    } else {
      data[0].imgOpacityValue = 0;
      data[1].imgOpacityValue = 0;
      data[2].imgOpacityValue = 0;
    }
    if (window.scrollY < 1700) {
      data[0].imgOpacityValue = 1;
      data[1].imgOpacityValue = 1;
      data[2].imgOpacityValue = 1;
    }
    console.log(window.scrollY);
  },
},

여기서는 스크롤 위치에 따라 이미지의 불투명도를 변경하여 이미지가 나타나고 사라지는 효과를 주었습니다. 각 구간별로 이미지가 나타나는 구간을 설정하고, 나머지 이미지는 불투명도를 0으로 설정하여 사라지게 했습니다.