会社のウェブサイトを構築し、フルスクリーンをスクロールしました。これにより、公式ウェブサイトの閲覧体験が大幅に向上しました。それでは、fullpage.jsを使用する方法を要約しましょう。私を修正するためのようこそ
1。fullpage.jsの紹介
FullPage.jsは、ブラウザのフルスクリーンスクロールを実装するJSプラグインのセットです。現在、多くのウェブサイトがそれを使用して、より良いブラウジングエクスペリエンスを実現しています。
達成できる関数：
•前後にサポートし、キーボード制御をサポートします
•複数のコールバック関数
•携帯電話とタブレットのタッチイベントをサポートします
•CSS3アニメーションをサポートします
•ウィンドウズームをサポートします
•ウィンドウがズームするときの自動調整
•スクロール幅、背景色、スクロール速度、ループオプション、コールバック、テキストアライメントなどを設定できます。
2。プラグインのダウンロード
npm | npm fullpage.jsをインストールします
BOWER | BOWERインストール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
注：最初にjQueryを紹介してから、フルページを導入する必要があります。私が最初にデモを書き始めたとき、順序が間違っているため、およびfullpage.jsのブラウザエラーのために効果は達成されませんでした。 jQueryは未定義です。
4. HTMLコードを書きます
<div id = "fullpage"> <div> section1 </div> <div> section2 </div> <div> section3 </div> <div> section4 </div> </div>
すべてのコンテンツは、ID名フルページを備えたDIVに含まれており、これをボディに追加することはできません。
クラス名を持つdiv要素。セクションは単一ページです。異なるページ間の交換は、マウスホイールとキーボードを介して制御でき、リストナビゲーションも設定できます。
同時に、ページで水平方向のスクリーンカット効果を作成する場合は、div.slideをdiv.sectionに追加できます。コードは次のとおりです。
<div> <div>スライド1 </div> <div>スライド2 </div> <div>スライド3 </div> <div>スライド4 </div> </div>
5。フルページを初期化します
$（document）.ready（function（）{$（ '＃fullpage'）。fullpage（{...../ options options、https：//github.com/alvarotrigo/fullpage.js/}）;}）;サイドバーナビゲーションのセットアップ
このナビゲーションは、通常、Webサイトのデザインで利用できます。フルページのデフォルトナビゲーションスタイルは小さな黒い点で、他のスタイルの設定もサポートしています。
<ul id = "mymenu"> <li data-menuanchor = "firstPage"> <a href = "＃firstPage">ファーストセクション</a> </li> <li data-menuanchor = "secondpage"> <a href = "＃secondPage">第2セクション</a> </li> <セクション</a> </li> <li data-menuanchor = "fourthpage"> <a href = "＃fourthpage"> 4番目のセクション</a> </li>
#mymenu {position：sixt; ...} $（ '＃fullpage'）。fullpage（{anchors：['firstpage'、 'secondpage'、 'thirdpage'、 'forthpage'、 'lastpage']、メニュー： '#mymenu'}）;6。遭遇した問題と解決策
ウェブサイトが完成した後、私はページを入力したばかりで、fullPage.jsファイルが初期化される前に、DOM CSSがロードされ、すべての表示スタイルの内容が絞り込まれ、ロード後に復元されることがわかりました。ウェブサイトが最適化されており、インターネットの速度が非常に強力な場合、この期間は短くなりますが、それでも悪いユーザーエクスペリエンスが発生します。
さまざまなソリューションを試してみてください。
1.Div.Section
セクション{オーバーフロー：非表示}
テスト後、この方法には役に立ちません。
2。空白のマスクを設定します。すべてのページが完成する前にマスクのみが表示され、テーマコンテンツが非表示になり、ロード後、コンテンツディスプレイマスクが削除されます。もちろん、マスクレイヤーにWebサイト関連のコンテンツを設定することもできます。
特定の実装方法デモ：
<html> <head> <Meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <title> un un un un un un un of titled document </title> <script language = "javascript =" text/javascript "> function showallcontent（status2）{status2）{status2） document.getElementByIdx（ "showcontent"）。style.display = status1; document.getElementByIdx（ "showload"）。style.display = status2; } </script> </head> <body onload = 'showallcontent（ "" "、" none "）'> <div id =" showload "style =" z-index：2; display：block; width：auto; auto; ">ページは読み込まれています... </div>
<script> showallcontent（ "none"、 ""）; </script>
</body>
</html>
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。