JavaScript 및 CSS로 스크롤 애니메이션을 만드는 방법

기본적으로 멋진 기업 웹사이트를 모두 보신 후 해당 웹사이트로 스크롤하면 텍스트가 위로 올라가는 것을 보셨나요? (애플 홈페이지 참고) 너무 흔한 일이라 이 질문에 대한 답이 많을 거라고 생각하시겠죠? 그런데 수많은 온라인 튜토리얼을 스크롤해봐도 스크롤에 등장하는 애니메이션을 찾을 수 없어서 직접 만들었습니다.

HTML(던 던 던!!!)

HTML은 매우 간단합니다. 그냥 요소를 만드세요

일부 텍스트

그리고 수업을 첨부하세요>

전체 HTML(요소를 변경할 수 있습니다. 단순화를 위해

를 사용했습니다.):

<p>



</p><h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

여기서 무슨 일이 벌어지고 있는 걸까요? .animate-scroll 클래스는 애니메이션을 선언합니다. 실제로 애니메이션을 만드는 코드입니다. 또 만들어도 되지만 저는 슬라이드업 페이드인 애니메이션이 제가 본 것 중 가장 흔한 애니메이션이라 만들어봤습니다. 그러나 .animate-scroll.visible은 애니메이션이 끝났을 때 요소의 상태를 보여줍니다. .animate-scroll을 변경하면 이것도 변경해야 합니다. 예를 들어 크기를 변경하는 경우 size:100%; 아니면 뭔가. 하지만 이 작업을 수행하는 방법에 대한 간단한 튜토리얼만 원한다면 아무 것도 변경하지 마세요.

자바스크립트

이 간단한 JavaScript를 복사하세요:

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

와! 코드가 너무 많아요! 무슨 일이야! 단계별로 분석해 보겠습니다.
먼저 document.addEventListener('DOMContentLoaded', () =>는 콘텐츠가 로드되었는지 감지합니다. 이것은 단지 "함수"를 실행합니다.
const elements = document.querySelectorAll('.animate-scroll'); 클래스를 찾습니다. HTML과 CSS의 클래스를 변경하는 경우에도 이를 변경하세요.
constobserver = new IntersectionObserver((entries) => { 항목.forEach(entry => 이는 요소가 뷰포트에 있는지 감지합니다. 그렇지 않으면 애니메이션을 적용하지 않습니다.
if (entry.isIntersecting) {entry.target.classList.add('visible');} 이는 애니메이션이 끝났는지 감지합니다. 그렇다면 CSS에 .visible을 추가합니다. 그래서 거기 있는 거예요!
임계값: 0.9 애니메이션을 적용하기 전에 페이지에 얼마나 많은 부분이 있는지 계산합니다. 0은 픽셀이 페이지에 도달하는 즉시입니다. 1은 페이지 위쪽의 약 25%에 해당하는 경우입니다. 2는 50% 정도... 사용자가 텍스트를 너무 오랫동안 숨기지 않고 애니메이션을 볼 수 있는 기회를 위해 0.9 정도로 유지하는 것이 좋습니다.
elements.forEach(element => {observer.observe(element); 이것은 단지 요소를 관찰하는 것 뿐입니다. 설명하기가 좀 무의미합니다. 페이지에 있습니까??? 이것이 처리됩니다.

최종 코드는...

제 놀라운 설명을 읽기엔 너무 게으르신가요? 전체 코드는 다음과 같습니다.

HTML:

<p>



</p><p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

자바스크립트:

<p>



</p><h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

그렇습니다! 이에 대한 심층 분석이 마음에 드셨기를 바랍니다. 질문이나 의견이 있거나 이 글을 쓴 유명한 사람과 이야기하고 싶다면 댓글을 남겨주세요. 여러분의 제안을 듣고 싶습니다!

읽어주셔서 감사합니다, 코드몬스터

위 내용은 JavaScript 및 CSS로 스크롤 애니메이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!