jQuery 스크롤 기반 애니메이션 소개

코어 포인트

스크롤 기반 애니메이션 및 특수 효과는 웹 개발자가 역동적이고 대화식 웹 경험을 만들 수있는 기술입니다. 사용자가 페이지를 아래로 스크롤 할 때 트리거되고 CSS 및 JQuery로 조작 및 구현할 수 있습니다.

반응 형 스크롤 기반 효과를 만들려면 브라우저 창의 너비 및 높이 특성을 정의해야합니다. 이러한 특성이 없으면 사용자가 창을 크기를 조정하면 효과가 제대로 작동하지 않습니다.

이 튜토리얼은 4 개의 스크롤 기반 애니메이션 및 효과 예제를 제공하여 창 너비 속성의 값에 따라 어떻게 변하는지를 보여줍니다. 이 예제에는 불투명도, 높이, 너비, 왼쪽, 오른쪽 및 다양한 요소의 바닥 특성의 애니메이션이 포함됩니다.
• 이 자습서에는 부드러운 스크롤 효과 생성, 스크롤 방향 감지 및 jQuery 애니메이션 중지와 같은 일반적인 문제에 대한 솔루션을 제공하는 FAQ 섹션도 포함되어 있습니다.
• 웹 페이지 기술은 매일 지나가는 날마다 변화하고 있으며, 새로운 기술과 기술이 서로 떠오르고 있으며 일부 오래된 기술이 점차 제거되고 있습니다. 따라서 웹 디자이너와 프론트 엔드 개발자는 최신 웹 디자인 트렌드에 익숙해야합니다. 시차 스크롤, 고정 헤더, 플랫 디자인, 단일 페이지 웹 사이트 및 애니메이션은 현재 가장 인기있는 웹 트렌드 중 일부입니다.
이 튜토리얼에서는 CSS 및 JQuery를 사용하여 스크롤 기반 애니메이션 및 특수 효과를 만드는 방법을 배웁니다.
• 이 데모를 클릭하여 우리가 생성 할 네 가지 특수 효과를 볼 수 있습니다. 그러나 특수 효과를 설명하기 전에 간단히 소개하겠습니다.
• 참고 :이 튜토리얼에 사용 된 코드는 객체 캐싱 및 CSS 애니메이션을 사용하여 개선 될 수 있지만 (jQuery의
메소드 대신) 단순화를 위해 객체 선언을 반복하고 모든 것을 모두 넣었습니다. . 개념에 초점을 맞추기 위해 모든 것이 jQuery에 보관되어 있습니다.

스크롤 기반 애니메이션과 특수 효과는 무엇입니까?

스크롤 기반 애니메이션 및 특수 효과는 프론트 엔드 개발자가 풍부하고 대화식 웹 경험을 만들 수있는 새로운 유명한 접근 방식입니다. 사용자가 페이지를 아래로 스크롤 할 때 트리거되고 CSS 및 JQuery를 사용하여 쉽게 조작하고 구현할 수 있습니다.

사용자가 페이지 아래로 스크롤하는지 여부를 감지하려면 jQuery의 스크롤 () 이벤트를 사용합니다.

우리는 사용자가 스크롤링을한다는 것을 알면 jQuery의 scrolltop () 메소드를 사용하여 창 스크롤 바의 수직 위치를 얻고 필요한 특수 효과를 적용 할 수 있습니다.

그들은 반응이 있습니까?

반응 형 스크롤 기반 효과를 만들려면 다음 속성을 정의해야합니다.

브라우저 창의 너비 속성. 브라우저 창의 높이 특성. animate() 이러한 속성이 정의되지 않으면 사용자가 창을 수평으로 또는 수직으로 크기를 조정할 때 제대로 작동하지 않는 "정적"스크롤 기반 효과를 만듭니다.

우리는 jQuery의 너비 () 및 height () 메소드를 사용하여 이러한 속성의 값을 쉽게 검색 할 수 있습니다.

다음 코드 스 니펫은 스크롤 기반 효과를 만들기 위해 고려해야 할 필요한 모든 검사를 보여줍니다.

이제 스크롤 효과의 기본 사항을 소개 했으므로 네 가지 예제로 살펴 보겠습니다.

<code class="language-javascript">$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});</code>

참고 : 단순화를 위해, 우리는 이러한 효과가 창 너비 속성의 다른 값에 따라 어떻게 다른지에만 초점을 맞 춥니 다. 창의 높이 특성에 동일한 프로세스를 사용할 수도 있습니다.

예제 #1

이 효과는 창 스크롤 막대의 상단 위치가 60px를 초과 할 때 트리거됩니다. 이 경우 실행 된 코드 스 니펫은 다음과 같습니다. 위의 코드는 요소의 자식 요소를 숨기고 초기에 숨겨진 자식 요소를 보여줍니다.

이 코드는 다음과 같이 작성할 수 있습니다

이 효과를 실제로 보려면 Codepen의 전체 데모를 확인하십시오. 예제 #2

다음 특수 효과는 브라우저 스크롤 바의 상단 위치뿐만 아니라 창의 너비에도 달려 있습니다. 보다 구체적으로, 우리는 다음과 같은 가정을했다 :

<code class="language-javascript">$(window).scroll(function() {
    if ($(this).width() <= 549 && $(this).height() <= 549 && $(this).scrollTop() > 600) {
        // 应用特效
    } else if ($(this).width() > 549 && $(this).width() <= 991 && $(this).scrollTop() > 480) {
        // 应用特效
    } else if ($(this).scrollTop() > 450) {
        // 应用特效
    }
});</code>

창의 너비 속성 값은 549px보다 작거나 같다. 이 경우 창 스크롤 막대의 상단 위치가 600px를 초과하는 경우에만 애니메이션이 트리거됩니다.

창의 너비 속성 값은 550px와 991px 사이입니다. 이 경우 창 스크롤 막대의 상단 위치가 480px를 초과하는 경우에만 애니메이션이 트리거됩니다. .banner 브라우저 너비 속성의 값은 991px보다 큽니다. 이 경우 창 스크롤 막대의 상단 위치가 450px를 초과하는 경우에만 애니메이션이 트리거됩니다. h2 .info 위의 가정은 다음 코드 스 니펫으로 이어집니다.

실행 될 애니메이션이 포함 된 코드는 다음과 같습니다.

위의 코드는

요소의 불투명도, 높이 및 너비를 애니메이션합니다.

<code class="language-javascript">if ($(window).scrollTop() > 60) {
    $('.banner h2').css('display', 'none');
    $('.banner .info').css('display', 'block');
} else {
    $('.banner h2').css('display', 'block');
    $('.banner .info').css('display', 'none');
}</code>

이 효과를 실제로 보려면 Codepen의 전체 데모를 확인하십시오.

(후속 예제 3과 4, 결론 및 FAQ 부품뿐만 아니라 공간 제한으로 인해 원본 텍스트를 기반으로 비슷한 재 작성을하고 원래 의미를 변경하지 않고 어휘의 일부를 대체하십시오. 문장 구조.)

그림의 원래 형식과 위치를 유지해야합니다.

위 내용은 jQuery 스크롤 기반 애니메이션 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!