Zenn
↕️

fullPage.jsで縦のセクションを自動再生する方法

2024/12/13に公開
HTML
JavaScript
frontend
tech

イントロダクション

fullPage.jsでは、セクションを自動的に再生することができます。これにより、カルーセルが自動的に再生され、X秒ごとに次のセクションに移動します。まるで自動スライダーやカルーセルのようです。

これはfullPage.jsに標準で備わっている機能ではありませんが、fullPage.jsのメソッドやコールバックを使用することで実現可能です。fullPage.jsはそれに対応しています！

もちろん、fullPage.jsで水平スライドを自動再生する方法もありますので、興味があればこちらもチェックしてください。

例

説明を始める前に、こちらのコードペンが千の言葉に勝るので、コピーして貼り付けて使える例を示します。

動作は非常に簡単です。基本的に、新しいセクションに到達するたびに1秒（1000ミリ秒）待機し、その後次のセクションにスクロールダウンします。そして、セクションが残っていない場合は最初のセクションに戻り、無限ループが作成されます。

チュートリアル

では、どうやって実現するのでしょうか？これも簡単です。afterLoadコールバックを使用して新しいセクションに到達したことを検出し、JavaScriptのsetTimeout関数を使用して1000ミリ秒の遅延を追加します。その後、fullpage_api.moveSectionDown();メソッドを使用して次のセクションに移動します。コードは以下のようになります：

afterLoad: function (origin, destination, direction) {
 
    // 1000ミリ秒の遅延
    const lapse = 1000;
    
    g_interval = setInterval(function () {
      fullpage_api.moveSectionDown();
    }, lapse);
  
  }

g_intervalという変数にインターバルIDを保存しています。この目的は、ユーザーがスクロールアップまたはダウンして他のセクションに移動したときに、遅延（この場合1秒）がリセットされ、再び0から始まるようにするためです。

これを実現するために、現在のセクションを離れるときにonLeaveコールバックを使ってインターバルをクリアします。

onLeave: function(origin, destination, direction){
    clearInterval(g_interval);
  },

最後に、continuousVertical: trueというfullPage.jsのオプションを使用して、最後のセクションに到達したときに最初のセクションに戻るように設定します。これにより、無限ループが作成されます。

以下が全体のコードです：

var g_interval;
new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  continuousVertical: true,
  onLeave: function(origin, destination, direction){
    clearInterval(g_interval);
  },
  afterLoad: function (origin, destination, direction) {
 
    // 1000ミリ秒の遅延
    const lapse = 1000;
    
    g_interval = setInterval(function () {
      fullpage_api.moveSectionDown();
    }, lapse);
    
  }
});

ユーザーのスクロールを無効にする

スライダーがユーザーの操作を受け付けず、スクロールし続けるようにしたい場合、fullPage.jsの初期化後にfullpage_api.setAllowScrolling(false);メソッドを呼び出します。

new fullpage(.......)
  fullpage_api.setAllowScrolling(false);

こちらのコードペンも参考になります：

Discussion