抹桥的博客
Language
Home
Archive
About
GitHub
Language
主题色
250
1027 文字
5 分
軽量なフルページスクロールフレームワーク「fullPage」V1.3 リリース

プロジェクトの経緯#

先日、新しいプロジェクトを担当することになりました。それは、全画面スクロールのシングルページアプリケーションでした。

当初はすべて自作するつもりでしたが、プロジェクトの時間が逼迫していたため、fullpageというフレームワークを使用しました。このフレームワークは非常に強力で、必要なAPIはほとんどすべて揃っており、使い勝手も非常に良いものでした。

しかし、いくつかの欠点もありました。まず、jQueryに依存していること、そしてファイルサイズが比較的大きく、モバイルデバイスにはあまり優しくない点です。そこで、私は自分の余暇を使ってこのプロジェクトを作成しました。

プロジェクトアドレス

シンプルなデモ

changeList#

V1.3.0

  • Firefoxのサポートを修正
  • ページナビゲーションコントロールを追加
  • いくつかのバグを解決

V1.1.0

  • 自動再生を追加
  • ループ再生を追加

V1.0.0

  • モバイルタッチコントロールをサポート
  • スライドの水平スクロールを追加
  • PCキーボードコントロールとマウスホイールコントロールを追加
  • 開発に便利な実用的なAPIを提供

概要#

他のライブラリに依存しない軽量なfullpageフレームワークで、主にモバイルデバイス(デスクトップもサポート)向けに設計されており、圧縮後は4kb未満です。 クールなシングルページスライドウェブサイトを簡単に作成できます。

互換性#

Android 4.1+Safari 7.1+IE EdgeOperaChrome

使用方法#

  • JavaScriptファイル fullpage.js をインポート
  • CSSファイル fullpage.css をインポート(lessを使用している場合は、lessのメインファイルでfullpage.lessをインポートできます)
  • 以下の形式でhtmlコードを記述します(idsectionContentの要素はラッパー層であり、idは自由にカスタマイズできます)
<div id="sectionContent" class="fp-section-content">
        <div class="fp-section">
            <div class="fp-slide-wrap">
              <div class="fp-slide">1</div>
              <div class="fp-slide">2</div>
              <div class="fp-slide">3</div>
              <div class="fp-slide">4</div>
              <div class="fp-slide">5</div>
            </div>
          </div>
        <div class="fp-section">2</div>
        <div class="fp-section">3</div>
    </div>

初期化#

簡単な使用方法としては、ページ読み込み完了後に以下を実行するだけです。

fullpage.init('#sectionContent');

カスタマイズが必要な場合は、以下の方法を使用します。

 fullpage.init('#sectionContent',{
        threshold: 10,              //触发滚动事件的阈值,越小越灵敏
        pageSpeed: 600,             //滚屏速度,单位为毫秒 ms
        afterLoad: null,            //页面载入事件,具体查看下面的 afterLoad 函数
        beforeLeave: null           //页面离开事件,具体查看下面的 beforeLeave 函数
    });

##beforeLeave(leaveIndex,nowIndex) 現在のページを離れるときにトリガーされるイベントです。関数内のthisは現在のページのsectionを指し、leaveIndexは離れるページのindexnowIndexは読み込むページのIndexです。 ##afterLoad(afterIndex) 次のページが読み込まれた後にトリガーされるイベントです。関数内のthisは読み込まれるページのsectionを指し、afterIndexは読み込むページのindexです。

fullpage.init("#sectionContent", {
  beforeLeave: function (leaveIndex, nowIndex) {
    //如果现在在第1个页面,向下滚动后
    if (nowIndex === 2) {
      //leaveIndex = 1,nowIndex = 2
      console.log("You will leave page 2"); //这条语句会执行
    }
    console.log(this, leaveIndex, nowIndex); //这里的 this 指向将要离开的页面元素,即第一个页面
  },
  afterLoad: function (afterIndex) {
    //afterIndex = 2
    if (afterIndex === 2) {
      console.log("You will go to page 2"); //这条语句会执行
    }
    console.log(this, afterIndex); //此处 this 指向当前载入的页面,即第二个页面
  },
});

メソッド#

##init(el,options) ページを初期化します。elは最も外側のラッパーセレクター、optionsはカスタマイズするパラメーターです。詳細は初期化を参照してください。 ##moveTo(index,slideIndex) 指定されたページにスクロールします。indexは必須パラメーター、slideIndexはオプションパラメーターです。

fullpage.moveTo(1); //滚动到第一个页面
fullpage.moveTo(3, 2); //滚动到第三个页面的第二个slider

##moveToNext(callback) 次のページに垂直スクロールします。callbackはオプションのコールバック関数です。

    fullpage.moveToNext();            //滚动到下一个页面
    fullpage.moveToNext(callback)     //滚动到下一个页面后,执行 callback
    fullpage.moveToNext(callback,params...)   //滚动到下一个页面后,执行 callback,params为callback的参数,根据情况传入
    function foo(a,b){
        console.log(a,b)
    }
    fullpage.moveToNext(foo,1,2)              //滚动到下一个页面,并输出 1,2

moveToPre(callback)#

前のページに垂直スクロールします。使い方は moveToNext(callback) と同じです。

slideToNext()#

次のページに水平スクロールします(ページは左にスクロールします)。

slideToPre()#

前のページに水平スクロールします(ページは右にスクロールします)。

TODO#

  • 指定ページへのスクロール方法を追加
  • ページスクロール時、ページ読み込みまたは離脱時にカスタムイベントを追加
  • 横方向スクロールのサポート
  • マウスホイールコントロールを追加
  • キーボードコントロールを追加

この記事は 2015年10月14日 に公開され、2015年10月14日 に最終更新されました。3645 日が経過しており、内容が古くなっている可能性があります。

軽量なフルページスクロールフレームワーク「fullPage」V1.3 リリース
https://blog.kisnows.com/ja-JP/2015/10/14/fullpage-js/
作者
Kisnows
公開日
2015-10-14
ライセンス
CC BY-NC-ND 4.0