プロジェクトの経緯
先日、新しいプロジェクトを担当することになりました。それは、全画面スクロールのシングルページアプリケーションでした。
当初はすべて自作するつもりでしたが、プロジェクトの時間が逼迫していたため、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 Edge | Opera | Chrome |
---|
使用方法
- JavaScriptファイル
fullpage.js
をインポート - CSSファイル
fullpage.css
をインポート(less
を使用している場合は、lessのメインファイルでfullpage.less
をインポートできます) - 以下の形式で
html
コードを記述します(id
がsectionContent
の要素はラッパー層であり、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
は離れるページのindex
、nowIndex
は読み込むページの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 日が経過しており、内容が古くなっている可能性があります。