AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성

사용 제스처

개발자가 전체 화면 스크롤 플러그인을 설계할 때 다음과 같은 작업을 수행할 수 있기를 바랍니다.

스크립트를 작성하지 않고도 신속하게 정교한 H5를 생성

PC 스크롤 휠 및 모바일 터치 지원

멋진 전환 효과

유연한 타임라인 관리

모든 것이 구성 가능

하지만 스크립팅은 없습니다. 유연성이 없나요? ! 아니요. 여기서는 HTML의 일부 매개변수를 구성할 수 있을 뿐만 아니라 플러그인의 콜백 기능을 통해 일부 로직을 삽입할 수도 있습니다. AlloyTouch.FullPage의 사용 자세를 분석하기 위해 코드를 스캔하여 위에서 본 예제의 부분 HTML을 살펴보겠습니다.

<div id="fullpage">
    <div>
      <div>
        <div class="animated" data-show="bounceInLeft" data-hide="bounceOutLeft">AlloyTouch Introduction</div>
        <div class="animated" data-delay="500" data-show="bounceInUp" data-hide="zoomOut"><img src="asset/alloytouch.png"></div>
        <div class="animated" data-delay="1200" data-show="bounceIn" data-hide="bounceOut">By AlloyTeam</div>
      </div>
    </div>
     
    <div>
      <div>
        <div class="animated" data-delay="100" data-show="flipInY" data-hide="flipOutY" >Powerful Features</div>
        <div class="animated" data-delay="400" data-show="zoomIn" data-hide="zoomOut"><img src="asset/power.png"></div>
      </div>
    </div>
    ...
    ...
    ...
 </div>

위 내용은 HTML의 일부일 뿐이라는 점에 유의하세요. , 플러그인 구성과 관련 없는 일부 HTML이 제거되었습니다. 하나씩 분석해 보겠습니다.

class="animated"는 animate.css의 규칙을 준수합니다. 이 클래스를 추가하면 애니메이션이 있다는 의미입니다.

data-delay는 페이지로 스크롤한 후 애니메이션 재생을 시작하기 전에 표시된 DOM 요소가 기다리는 시간을 나타냅니다. 개발자가 표시하지 않으면 기본값은 0입니다.

data-show는 표시된 DOM 요소에 의해 표시되는 애니메이션 유형을 나타냅니다.

data-hide는 표시된 DOM 요소의 숨겨진 애니메이션 유형을 나타냅니다(보통 사용자에게는 표시되지 않지만 표시 시간의 경우). 스무딩, 일반적으로 데이터 표시와 반대 유형으로 설정)

너무 많아, 너무 많은 구성, 너무 많은 구성! ! 충분히 간단합니다! !

물론 js에서 초기화해야 합니다.

new AlloyTouch.FullPage("#fullpage",{
    animationEnd:function () {
     
    },
    leavePage: function (index) {
      console.log("leave"+index)
    },
    beginToPage: function (index) {
      console.log("to"+index);
      pb.to(index / (this.length-1));
    }
  });

animationEnd는 스크롤이 끝난 후의 콜백 함수입니다.

leavePage는 a를 떠나는 것을 나타냅니다. 특정 페이지의 콜백 함수

beginToPage는 특정 페이지로 이동하는 콜백 함수를 나타냅니다

위의 pb는 탐색의 진행률이나 진행률을 설정하는 데 사용됩니다. 지금은 이것. 필요한 경우 사용자는 진행률 표시줄 구성 요소 자체를 캡슐화할 수 있습니다.

원리 분석

여기서 주로 분석을 위한 AlloyTouch.FullPage의 핵심 코드를 추출합니다.

new AlloyTouch({
  touch: this.parent,
  target: this.parent,
  property: "translateY",
  min: (1 - this.length) * this.stepHeight,
  max: 0,
  step: this.stepHeight,
  inertia: false,
  bindSelf : true,
  touchEnd: function (evt, v, index) {
    var step_v = index * this.step * -1;
    var dx = v - step_v;
 
    if (v < this.min) {
      this.to(this.min);
    } else if (v > this.max) {
      this.to(this.max);
    } else if (Math.abs(dx) < 30) {
      this.to(step_v);
    }else if (dx > 0) {
      self.prev();
    } else {
      self.next();
    }
    return false;
  },
  animationEnd: function () {
    option.animationEnd.apply(this,arguments);
    self.moving = false;
  }
});

여기서 터치해서 이동한 Dom은 전체 페이지 DOM, 즉 this.parent

위에서 위아래로 스크롤하므로 이동의 속성은 번역Y

min 할 수 있습니다. window.innerHeight를 통과하고 총 페이지 수에서 계산됩니다. this.stepHeight는 window.innerHeight

max는 분명히 0입니다

step은 분명히 window.innerHeight, 즉 this.stepHeight입니다.

inertia: False는 관성 동작을 비활성화한다는 의미입니다. 즉, 사용자가 손을 떼고 비활성 스크롤을 하지 않는다는 의미입니다.

bindSelf는 touchmove, touchend 및 touchcancel이 모두 this.parent 자체에 바인딩되어 있지 않고 바인딩되어 있음을 의미합니다. 창문으로. BindSelf가 설정되지 않으면 touchmove, touchend 및 touchcancel이 모두 창에 바인딩됩니다.

여기서 자세히 설명해야 합니다. 이 바인딩Self 구성은 예를 들어 AlloyTouch 중첩 문제를 해결하는 데 매우 유용합니다. 예를 들어 위 코드를 스캔하여 본 예에서 AlloyTouch가 중첩된 데모는 다음과 같습니다.

이것은 실제로 중첩 스크롤입니다. 안쪽을 굴리면 바깥쪽도 굴러가나요? 어떻게 해결하나요? 내부 스크롤은 반드시 BindSelf를 추가하고 버블링을 방지해야 합니다.

내부 스크롤의 자세한 코드를 살펴보겠습니다.

var scroller = document.querySelector("#scroller");
Transform(scroller,true);
 
new AlloyTouch({
  touch:"#demo0",
  target: scroller,
  property: "translateY",
  min:250-2000,
  max: 0 ,
  touchStart:function(evt){
    evt.stopPropagation();
  },
  touchMove:function(evt){
    evt.stopPropagation();
  },
  bindSelf:true
})

이 경우 중첩된 HTML 내부 중첩된 AlloyTouch는 버블링되지 않습니다. 즉, 내부 스크롤은 외부 스크롤을 트리거하지 않습니다.

계속해서 FullPage 소스 코드 분석:

touchEnd는 사용자의 손가락이 화면을 떠난 후의 콜백 함수입니다. 여기에는 경계 처리 논리가 있습니다.

최소값과 최대값을 초과하면 해당하는 최소값과 최대값이 수정됩니다.

단계 보정, 절대값이 30px 미만이면 재설정됩니다.

단계 보정, 절대값이 30px보다 크고 0보다 크면

단계 보정, 절대값이 30px보다 크면, 0보다 작으면 다음 페이지로 이동합니다.

false를 반환하면 모션 보정 로직이 실행됩니다. AlloyTouch를 놓으면 손이 실행되지 않습니다.

animationEnd는 모션이 끝난 후의 콜백입니다. 이 함수는 AlloyTouch.FullPage에서 사용자가 전달한 animationEnd를 실행합니다. 거짓으로 이동합니다.

AlloyTouch.FullPage의 여정을 시작하세요

Github: https://github.com/AlloyTeam/AlloyTouch

위 내용은 이 글의 전체 내용입니다. , 모든 사람에게 도움이 되기를 바랍니다. 학습이 도움이 되었으며, 모든 사람이 PHP 중국어 웹사이트를 지원하기를 바랍니다.

더 많은 AlloyTouch 전체 화면 스크롤 플러그인을 보려면 30초 만에 부드러운 H5 페이지를 만들 수 있습니다. 관련 기사는 PHP 중국어 웹사이트를 참고하세요!