CSS로 스크롤 효과에 대한 텍스트 공개 방법

순수한 CSS는 스크롤 트리거 텍스트 디스플레이 효과를 직접 달성 할 수는 없지만 소량의 JavaScript 및 CSS 전환 애니메이션을 결합하여 효율적으로 구현할 수 있습니다. 구체적인 방법은 JavaScript를 사용하여 요소가 뷰포트에 들어가고 "공개 된"클래스를 추가하는지 여부를 감지하는 것입니다. CSS는 투명성 및 변위의 전환 효과를 정의 할 책임이 있습니다. 교차로 관찰자 API를 사용하여 성능을 향상시키고 궁극적으로 부드럽고 우아한 스크롤 텍스트 디스플레이 효과를 달성하는 것이 좋습니다.

CSS로 스크롤 효과에 대한 텍스트 공개 텍스트를 작성하는 것은 웹 페이지에 미묘한 상호 작용을 추가하는 깨끗하고 성능적인 방법입니다. 순수한 CSS는 스크롤 기반 애니메이션과 관련하여 한계가 있지만 (CSS 만 스크롤 위치를 직접 감지 할 수 없으므로) Scroll 감지를 위해 최소한의 JavaScript와 결합 된 CSS를 사용하여 설득력있는 텍스트를 공개 할 수 있습니다. 효과적으로 수행하는 방법은 다음과 같습니다.

1. 스크롤 감지를 위해 JavaScript와 함께 CSS를 사용하십시오

진정한 "스크롤"효과는 JavaScript가 사용자의 스크롤 위치를 모니터링하고 요소가 볼 때 클래스 변경을 트리거해야합니다. 그러나 실제 애니메이션과 스타일은 CSS가 처리합니다.

기본 HTML 구조

 <div class = "공개 컨테이너">
  <p class = "text-to-reveal">이 텍스트는 스크롤 할 때 공개됩니다. </p>
</div>

CSS : 공개 애니메이션을 정의하십시오

 .Text-to-Reveal {
  불투명도 : 0;
  변환 : Translatey (20px);
  전환 : 불투명도 0.8S 편의성, 0.8 초의 편의를 변환;
}

.text-to-Reveal.revealed {
  불투명도 : 1;
  변환 : Translatey (0);
}

이것은 텍스트를 보이지 않게하고 처음에는 약간 바뀌 었습니다. revealed 클래스가 추가되면 사라지고 매끄럽게 움직입니다.

JavaScript : 스크롤에 클래스를 추가하십시오

 const textElements = document.querySelectorAll ( '. Text-to-Reveal');

const restoinscroll = () => {
  textlements.foreach (el => {
    const ElementTop = el.getBoundingClientRect (). 상단;
    Const WindowHeight = Window.innerHeight;

    // 요소가 뷰포트에있는 경우
    if (elementTop <windowheight * 0.8) {
      el.classlist.add ( &#39;공개&#39;);
    }
  });
};

//로드 및 스크롤에서 실행됩니다
window.addeventListener ( &#39;load&#39;, 공개 스크롤);
window.addeventListener ( &#39;scroll&#39;, respliconscroll);

이 스크립트는 각 .text-to-reveal 요소가 뷰포트 높이의 80% 이내인지 확인합니다. 공개가 발생할 때 제어하기 위해 0.8 조정할 수 있습니다 (예 : 이전의 경우 0.7 , 완전히 볼 수있는 경우 1 ).

2. 선택 사항 : 재사용 성을 위해 CSS 사용자 정의 속성을 사용하십시오

CSS 변수를 사용하여 효과를보다 유연하게 만들 수 있습니다.

 .reveal-container {
  -reveal-delay : 0.2s;
}

.Text-to-Reveal {
  불투명도 : 0;
  변환 : Translatey (20px);
  전환 : 불투명도 0.8S 편의성, 0.8 초의 편의를 변환;
  전환 지연 : var (-공개 지연, 0S);
}

.text-to-Reveal.revealed {
  불투명도 : 1;
  변환 : Translatey (0);
  전환 지연 : var (-공개 지연, 0S);
}

이제 요소 당 타이밍을 제어 할 수 있습니다.

 <div class = "공개 컨테이너"스타일 = "-공개 델리 : 0.3S;">
  <p class = "Text-to-Reveal">는 약간 나중에 나타냅니다 </p>
</div>

3. 성능 팁

• 성능 문제를 방지하기 위해 스크롤 이벤트 스로틀 :

   isscrolling = false;
  window.addeventListener ( 'scroll', () => {
    if (! isscrolling) {
      window.requestanimationFrame (() => {
        공개 콘 스크롤 ();
        isscrolling = 거짓;
      });
      isscrolling = true;
    }
  });

• 애니메이션에 대한 transform 및 opacity 사용하십시오. GPU가 셀러 팅되어 있으며 margin 이나 top 보다 더 잘 수행합니다.

• 청취자를 너무 많은 요소에 첨부하지 마십시오. 다중 공개 요소에 단일 관찰자 패턴을 사용하는 것을 고려하십시오.

4. 대안 : 교차로 관찰자 사용 (권장)

더 나은 성능과 클리너 코드를 보려면 IntersectionObserver 사용하십시오. API를 사용하십시오.

 const observer = new intersectionObserver ((entries) => {
  entries.foreach (entry => {
    if (EntrysInterSecting) {
      Entry.target.classlist.add ( '공개');
      // 선택 사항 : 공개 후 관찰 중지
      Observer.unobserve (Entry.target);
    }
  });
}, {임계 값 : 0.1}); // 요소의 10%가 표시되면 트리거됩니다

document.querySelectorALL ( '. Text-to-Reveal'). foreach (el => {
  Observer.observe (el);
});

이것은 모든 스크롤 이벤트를 듣는 것보다 더 효율적이며 스크롤 기반 공개의 최신 표준입니다.

기본적으로 CSS 만으로 진정한 스크롤 트리거 공개를 할 수는 없지만 최소한의 JavaScript와 부드러운 CSS 전환을 결합하면 강력하고 성능이 좋은 텍스트 공개 효과가 제공됩니다. 최상의 결과를 얻으려면 IntersectionObserver 사용하고 전문적인 모습을 위해 애니메이션을 미묘하게 유지하십시오.

위 내용은 CSS로 스크롤 효과에 대한 텍스트 공개 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!