2016-06-15 1 views
0

사례가 매우 간단합니다 : 여러 섹션이있는 웹 사이트가 있습니다. 따라서 스크롤 할 때마다 다른 섹션이 나타납니다.다른 섹션으로 스크롤하기 전에 사물을 움직이는 방법?

이제 일부 섹션에는 텍스트 블록이있을 수 있습니다.

  1. 일 스크롤 그냥 다음 섹션으로 이동해야 더 애니메이션 된 본체는 이없는 경우

    , 그것은 아래로 스크롤의 정상적인 동작을한다. 애니메이션 된 본체를 있으면

, 스크롤링이 순서로한다 :

  1. TextBlock에 애니메이션한다

    성 스크롤; 또한 현재 섹션에 머물러 라.

  2. nd 스크롤은 다음 섹션으로 스크롤 다운한다.

간단한 방법이 있나요? 스크롤

$('#fullpage').fullpage({ 
    onLeave: function(index, nextIndex, direction){ 
     //it won't scroll if the destination is the 3rd section 
     if(nextIndex == 3){ 
      return false; 
     } 
    } 
}); 

취소에 https://github.com/alvarotrigo/fullPage.js#callbacks에서

답변

3

당신은 비행 텍스트가 있는지 여부를 확인하고 다음 섹션을 계속하거나 비행 텍스트에서 비행해야 및 매개 변수 또는 메소드와 onLeave 콜백을 변경할 수 있습니다 다음 섹션으로 이동을 취소하십시오.

+0

이것은 훌륭하게 작동했습니다! 그 후에 스크롤 할 수 있도록 hasClass()에 대한 체크를 추가했다. 고마워! – Trollwut

0

자바 스크립트 애니메이션 및 액션을 처리하는 가장 좋은 방법 인 @dieend에 따라 콜백을 사용하는 것 이외에도 활성 섹션에 추가 된 active 클래스와 같이 fullpage.js에 의해 추가 된 상태 클래스를 사용할 수도 있습니다. fp-viwing-x-y가 본문에 추가되었습니다.

이렇게하면 CSS 만 사용하여 애니메이션을 처리 할 수 ​​있습니다.

당신은 상태 클래스 애니메이션을 만들 본문에 추가 된 클래스를 사용하는 방법에 대한 on the docs

그리고 여기 a video tutorial의 목록을 가지고있다.

관련 문제