ScrollTrigger 컨텐츠의 초기 표시 및 지속성에 대한 튜토리얼

이 튜토리얼은 Greensock ScrollTrigger를 사용할 때 스크롤하기 전에 스크롤하기 전에 동적 컨텐츠가 나타나지 않는 문제를 해결하도록 설계되었습니다. 페이지가로드 될 때 첫 번째 컨텐츠 요소가 즉시 표시되도록하는 방법에 대해 설명하고 ScrollTrigger의 토글 반응이 스크롤 중에 컨텐츠의 지속성에 어떤 영향을 미치는지 논의합니다. 애니메이션 초기화를 최적화하고 트리거 동작을 이해하면 더 매끄럽고 더 나은 사용자 경험 스크롤 구동 애니메이션을 만들 수 있습니다.

Scrolltrigger 컨텐츠 표시 : 초기 상태 및 지속성을 최적화하십시오

Greensock ScrollTrigger로 스크롤 구동 애니메이션을 작성할 때, 일반적인 요구 사항은 특정 영역을 스크롤 한 후 페이지가로드되고 표시 될 때 특정 컨텐츠를 즉시 볼 수 있도록해야합니다. 기본적으로 컨텐츠 요소의 초기 상태가 숨겨진 상태로 설정되고 (예 : Autoalpha : 0) 디스플레이 애니메이션이 ScrollTrigger에 바인딩되면 사용자가 스크롤을 시작할 때까지 콘텐츠가 표시되지 않습니다. 마찬가지로, 애니메이션의 전환이 제대로 설정되지 않으면 트리거 영역을 스크롤 한 후 컨텐츠가 다시 사라질 수 있습니다.

문제 분석 : 스크롤 후 초기 숨기기 및 사라짐

제공된 예제 코드에서 모든 .content 요소는 gsap.set ( '. content', {autoalpha : 0})에 의해 숨겨진 것으로 초기화됩니다. 그 후, 각 컨텐츠 요소 (.Content-I)의 디스플레이 애니메이션 (set (rattantContent, {autoalpha : 1}, 0))은 작은 타임 라인에 중첩되고 별도의 ScrollTrigger.create 인스턴스로 제어됩니다. 이 독립형 스크롤 트리거는 토그 플레이크를 사용합니다 : "리버스 플레이 리버스 재생".

이 설정은 두 가지 주요 문제로 이어집니다.

1. 초기 컨텐츠가 표시되지 않습니다 : 모든 컨텐츠가 숨겨 지도록 사전 설정되므로 첫 번째 컨텐츠의 디스플레이 애니메이션은 시작 위치로 스크롤 할 때만 재생되므로 페이지가로드되고 사용자가 스크롤하지 않을 때 화면이 비워집니다.
2. 스크롤 후 컨텐츠가 사라집니다. ToggleActions : "Reverse Play Reverse Play"는 다음과 같습니다.
   • Onenter : 애니메이션을 재생합니다.
   • Onleave : 애니메이션을 반대로 연주합니다.
   • OnEnterback : 애니메이션을 재생합니다.
   • OnleaveBack : 애니메이션을 반대로 재생합니다. 이는 컨텐츠 요소의 트리거 영역을 스크롤 할 때 컨텐츠가 표시됨을 의미합니다. 그러나 해당 영역에서 스크롤 할 때 애니메이션이 뒤로 재생되어 콘텐츠가 다시 숨겨집니다. 이는 "마지막 컨텐츠를 보관할 필요성"과 상반됩니다.

솔루션 1 : 첫 번째 컨텐츠가 처음에 보이는지 확인하십시오.

첫 번째 문제, 즉 페이지가로드 될 때 첫 번째 컨텐츠 요소를 표시하도록하기 위해 ScrollTrigger 애니메이션 로직 외부에서 초기 상태를 명확하게 설정해야합니다. GSAP 애니메이션은 선언적입니다. 요소의 초기 상태가 숨겨 지도록 설정되면 애니메이션 지침이 변경 될 때까지 숨겨져 있습니다.

가장 간단한 방법은 Autoalpha 속성을 모든 스크롤리터 및 애니메이션 정의 전에 또는 최소한 첫 번째 컨텐츠 요소의 작은 타임 라인이 생성되기 전에 1로 설정하는 것입니다.

 // 첫 번째 컨텐츠 요소 가져 오기 const firstContentElement = document.querySelector ( 'div.Content-0');

// GSAP를 사용하여 가시성을 즉시 설정하여 gsap.set (FirstContentElement, {autoalpha : 1});

// 또는 애니메이션에 표시하려면 초기 상태이지만 일반적으로 직접 설정됩니다).
// gsap.timeline ().

gsap.set ( '. content', {autoalpha : 0}) 뒤에이 코드 스 니펫을 넣지 만 헤드 라인 앞에는 스크롤 동작이 발생하기 전에 첫 번째 컨텐츠 (.Content-0)가 표시 될 수 있습니다.

최적화 된 JavaScript 코드 예 :

 // 1. 처음에 GSAP.SET ( '. content', {autoalpha : 0})를 숨기기 위해 모든 것을 설정합니다.

// 2. 페이지가 const firstContentElement = docum
if (firstContentELement) {// 요소가 존재하는지 확인하고 견고성 gsap.set (FirstContentElement, {autoalpha : 1});
}

var 헤드 라인 = gsap.utils.toarray ( ". text");
var totalduration = 8000;
var singleduration = Totalduration / Headlines.length;

const linetimeline = gsap.timeline ();

scrolltrigger.create ({
    트리거 : ".pin-up",
    시작 : "상단 상단",
    종료 : "="Totalduration,
    // 마커 : true, // 디버깅을 위해서는 핀을 제거합니다 : true,
    스크럽 : 사실,
    애니메이션 : Linetimeline,
});

헤드 라인 .foreach ((Elem, i) => {
    const smalltimeline = gsap.timeline ();
    const content = document.querySelector ( '. content-wrap');
    const antuttantContent = content.querySelector ( 'div.Content-'i);

    scrolltrigger.create ({
        트리거 : "바디",
        시작 : "top -="(Singleduration * i),
        종료 : "="단일,
        애니메이션 : Smalltimeline,
        // 3. 컨텐츠 관리를 제어하도록 조정 조정 // 스크롤을 통해 컨텐츠가 표시되어야하는 경우이 설정을 수정할 수 있습니다.
        // 또는 모든 것이 눈에 띄게 유지되어야하는 경우 더 복잡한 논리 또는 다른 토그 리치가 필요합니다.
        토글 반응 : "리버스 플레이 리버스 재생", // 원본 설정은 내용이 사라집니다});

    작은 티 라인
        .to (Elem, {지속 시간 : 0.25, 색상 : "Orange"}, 0)
        .to (Elem.FirstChild, {기간 : 0.25, BackgroundColor : "Orange", 너비 : "50px"}, 0)
        .SET (relationContent, {autoalpha : 1}, 0); // 타임 라인 시작시 콘텐츠 표시});

해결책 2 : 마지막 컨텐츠를 내구성과 가시를 유지하십시오

두 번째 문제를 해결하려면 "스크롤을 통해 마지막 컨텐츠를 계속 볼 수 있습니다". 토그 플레이크 메커니즘을 이해해야합니다. 기본 "재생 리버스 플레이 리버스"는 트리거 영역을 떠날 때 컨텐츠가 리버스 애니메이션이되고 숨겨집니다.

목표가 표시된 후에 모든 것을 가시적으로 유지하거나 마지막 컨텐츠 만 표시되는 경우 몇 가지 전략이 있습니다.

1. 토글 반응 수정 :

   • 모든 콘텐츠의 경우 일단 표시되면 표시되기를 원한다면 "None Play None Play"에 대한 토그리닝을 설정할 수 있습니다. 즉, 애니메이션은 입력 할 때 한 번만 재생되며 떠날 때 반전되지 않습니다.
   • 마지막 컨텐츠 만 보이도록 유지하려면 헤드 라인에 조건부 판단을 추가 할 수 있습니다.

      scrolltrigger.create ({
         트리거 : "바디",
         시작 : "top -="(Singleduration * i),
         종료 : "="단일,
         애니메이션 : Smalltimeline,
         토글 반응 : (i === 헤드 라인 .length -1)? "재생 없음 플레이 없음": "재생 리버스 플레이 리버스",
     });

     여기서 "Play None Play None"은 출입 할 때 재생하고, 떠날 때 아무것도하지 않고, 리버스에 들어갈 때 재생하고, 리버스로 떠날 때 아무것도하지 않는 것을 의미합니다. 이를 통해 트리거 영역이 끝난 후 마지막 컨텐츠가 최종 상태로 유지되도록합니다 (Autoalpha : 1).

2. Autoalpha : 0 처음 숨기기 : 콘텐츠가 오버레이되어 있고 하나씩 표시되기를 원한다면 Autoalpha : 0 전 세계적으로 설정을 고려할 수 있습니다. 대신, 각 컨텐츠 요소를 기본적으로 표시 한 다음 애니메이션을 사용하여 화면에서 벗어나거나 스타일을 변경하십시오. 그러나이 예제의 자동 조정 시나리오의 경우 토그 플랑 반도 수정이 더 직접적입니다.

3. 기본 타임 라인으로의 제어 가시성 : 보다 복잡한 시나리오의 경우, 모든 컨텐츠에 대한 자동 조정 제어는 주 타임 라인에 통합 될 수 있으며 여러 독립적 인 스크롤 트리거에 의존하지 않고 스크롤링 진행 상황을 기반으로 각 컨텐츠의 디스플레이 및 숨기기를 위해 정확하게 제어 될 수 있습니다.

요약 및 예방 조치

• 초기 상태 관리가 핵심입니다. 즉시 표시해야 할 사항은 gsap.set ()를 통해 또는 CSS에서 직접 스크롤 트리거 애니메이션 로직 외부의 초기 가시성에서 설정해야합니다.
• 토글 반응 이해 : 스크롤 이벤트에서 애니메이션의 동작을 정확하게 제어하는 ​​데 토그 플랑 (OneNer, Onleave, OnEnterback, OnleaveBack)의 네 가지 매개 변수를 이해하는 것이 중요합니다.
• 디버깅 도구 : 개발 프로세스 중에 마커를 사용하여 : True : Scrolltrigger의 트리거 및 종말점을 직관적으로 볼 수 있으며, 이는 애니메이션 동작을 디버깅하는 데 매우 도움이됩니다.
• 성능 고려 사항 : 이 예제의 애니메이션은 비교적 간단하지만보다 복잡한 스크롤 구동 애니메이션의 경우 많은 양의 DOM 작업 또는 스크롤 이벤트에서 비싼 계산을 피하는 등의 성능을 최적화하기 위해주의를 기울여야합니다.

위의 방법을 통해 ScrollTrigger에서 초기 디스플레이 및 컨텐츠의 지속성 문제를 효과적으로 해결하여 사용자의 기대 및 설계 요구에 더 부합하는 스크롤 애니메이션 경험을 만들 수 있습니다.

위 내용은 ScrollTrigger 컨텐츠의 초기 표시 및 지속성에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!