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 を削除していることに注意してください。プラグインの設定に関係します。それらを 1 つずつ分析してみましょう:

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は特定のページから離れることを表すコールバック関数です

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 です

上下スクロールなので、モーションの属性はtranslateY

minはwindow.innerHeightで計算でき、This.stepHeightはwindow.innerHeight

maxは明らかに0

stepです。 window.innerHeight、これは、.stepHeight

inertia: false は、慣性モーションが禁止されていることを意味します。つまり、ユーザーが手を離すと慣性スクロールは行われません

bindSelf は、touchmove、touchend、および touchcancel がすべて this.parent にバインドされていることを意味します。窓にではなく、それ自体に。 bindSelf が設定されていない場合、touchmove、touchend、および touchcancel はすべて window にバインドされます。

このbindSelf構成は、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 より小さい場合、次のページに進みます。

return false は、AlloyTouch が手を離した後にモーション補正ロジックを実行しないことを意味します。これは非常に重要です。移動終了後のコールバック関数は、AlloyTouch.FullPage からユーザーによって渡された animeEnd を実行し、移動を false に設定します。

AlloyTouch.FullPage の旅を始めましょう

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

上記がこの記事の全内容であり、皆様の学習に役立つことを願っています。誰もが PHP 中国語 Web サイトをサポートします。

AlloyTouch 全画面スクロール プラグインの詳細については、30 秒でスムーズな H5 ページを作成できます。関連記事については、PHP 中国語 Web サイトに注目してください。