ホームページ >ウェブフロントエンド >jsチュートリアル >Fullpage.js 全画面スクロールプラグインの使用例

Fullpage.js 全画面スクロールプラグインの使用例

高洛峰オリジナル: 2017-01-11 09:35:341484ブラウズ

会社ウェブサイトが完成し、全画面スクロールにより、公式ウェブサイトの閲覧体験が大幅に改善されました。それではfullpage.jsの使い方をまとめていきます。修正歓迎

1. fullpage.js の紹介

fullpage.js は、ブラウザーでの全画面スクロールを実現する一連の JS プラグインで、現在多くの Web サイトがより良いブラウジングエクスペリエンスを実現するために使用しています。
実装可能な機能:

•前方、後方、およびキーボードコントロールをサポート
•複数のコールバック関数
•携帯電話およびタブレットでのタッチイベントをサポート
•CSS3アニメーションをサポート
•ウィンドウスケーリングをサポート
•ウィンドウが拡大されたときに自動的に調整しますズームされています
•スクロール幅、背景色、スクロール速度、ループオプション、コールバック、テキスト配置などを設定できます

2. プラグインのダウンロード

npm|npm install fullpage.js
bower|bower install fullpage .js
github|https://github.com/alvarotrigo/fullPage.js/
cdn|https://cdnjs.com/libraries/fullPage.js

3.ファイル導入方法

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

注意:必ず最初に jquery を導入してから、fullpage を導入してください。最初にデモを書き始めたとき、順序が間違っていたため、ブラウザは fullpage.js の jquery が定義されていないというエラーを報告しました。

4. HTMLコードを書く

<div id="fullpage">
    <div class="section">section1</div>
    <div class="section">section2</div>
    <div class="section">section3</div>
    <div class="section">section4</div>
</div>

すべてのコンテンツは、ID名fullpageのdivに含まれます。これをbodyに追加することはできません。
クラス名 .section を持つ div 要素は 1 つのページであり、マウスホイールとキーボードを使用して異なるページ間の置換を制御でき、リストナビゲーションを設定することもできます。
同時に、ページ内で水平方向の画面カット効果を作成したい場合は、div.section に div.slide を追加できます。コードは次のとおりです:

<div class="section">
  <div class="slide"> Slide 1 </div>
  <div class="slide"> Slide 2 </div>
  <div class="slide"> Slide 3 </div>
  <div class="slide"> Slide 4 </div>
</div>

5. フルページを初期化します

$(document).ready(function() {
  $(&#39;#fullpage&#39;).fullpage(
    {
      .......
      //options 详情参看https://github.com/alvarotrigo/fullPage.js/
    } 
  );
});

サイドバーナビゲーションを設定します

このナビゲーションは通常、Web サイトのデザインで見られます。フルページのデフォルトのナビゲーションスタイルは小さな黒い点です。他のスタイルの設定をサポートします。

<ul id="myMenu">
      <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
      <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
      <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
      <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

#myMenu{
  position:fixed;
    ...
}
$(&#39;#fullpage&#39;).fullpage({
  anchors: [&#39;firstPage&#39;, &#39;secondPage&#39;, &#39;thirdPage&#39;, &#39;fourthPage&#39;, &#39;lastPage&#39;],
  menu: &#39;#myMenu&#39;
});

6. 発生した問題と解決策

完成後に Web サイトをテストしたところ、最初にページに入ったとき、fullpage.js ファイルが初期化される前に DOM CSS が作成されていることがわかりました。ロードされると、表示されるすべてのスタイルコンテンツが密集し、ロード後に復元されます。 Web サイトが最適化されており、インターネット速度が速い場合、この時間は比較的短くなりますが、それでもユーザーエクスペリエンスは低下します。
そこで私はさまざまな解決策を試しました:
1.div.section
Section{overflow:hidden}
テスト後、このメソッドは役に立ちません。

2. 空のマスクを設定します。すべてのページが完了する前にマスクのみが表示され、読み込みが完了すると、コンテンツの表示マスクが削除されます。もちろん、Webサイト関連のコンテンツをマスクレイヤーに設定することもできます。
具体的な実装方法のデモ:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script language="javascript" type="text/javascript">
        function showAllContent(status1,status2){
         document.getElementByIdx("showContent").style.display=status1;
         document.getElementByIdx("showLoad").style.display=status2;
      }
    </script>
  </head>
<body onLoad=&#39;showAllContent("","none")&#39;>
<div id="showLoad" style="z-index:2; display:block; width:auto; height:auto;">页面加载中......</div>
<div id="showContent" style="z-index:1; ">
//最终要显示的内容<br></div><br><script>showAllContent("none","");</script><br></body><br></html>

以上がこの記事の全内容です、皆様の学習に役立つことを願っております。また、皆様にもPHP中国語ウェブサイトをサポートしていただければ幸いです。

fullpage.js 全画面スクロールプラグインの使用例に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：全画面スクロールプラグインfullPage.js使用例分析次の記事：全画面スクロールプラグインfullPage.js使用例分析

続きを見る

Fullpage.js 全画面スクロールプラグインの使用例

関連記事