Fullpage.js full screen scroll plug-in usage example-JS Tutorial-php.cn

Fullpage.js full screen scroll plug-in usage example

高洛峰

Release： 2017-01-11 09:35:34

Original

1476 people have browsed it

The company website has just been built, and through full-screen scrolling, the browsing experience of the official website has been significantly improved. So let’s summarize the methods of using fullpage.js. Corrections welcome

1. Introduction to fullpage.js

Fullpage.js full screen scroll plug-in usage example

##fullpage.js is a set of js plug-ins that realize full-screen scrolling in browsers. Many websites now They are all used to achieve a better browsing experience.

Possible functions:

•Support forward, backward and keyboard control

•Multiple callback functions
•Support mobile phone and tablet touch events
•Support CSS3 animation
•Support window scaling
•Automatically adjust when window scaling
•Can set scroll width, background color, scroll speed, loop options, callbacks, text alignment, etc.

2 .Plug-in download

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. File introduction method

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

Copy after login

Note: jquery must be introduced first , and then introduce fullpage. When I first started writing the demo, the effect could not be achieved because of the wrong order. The browser reported an error that jquery in fullpage.js was undefined.

4. Write html code

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

Copy after login

All content is contained in the div with the ID name fullpage. You cannot add this to the body.

The div element with the class name .section is a single page. You can control the replacement between different pages through the mouse wheel and keyboard, and you can also set up list navigation.
At the same time, if you want to create a horizontal screen cutting effect within a page, you can add div.slide to div.section. The code is as follows:

<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>

Copy after login

5. Initialize fullpage

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

Copy after login

Set sidebar navigation

This navigation is general Website design will have it. The default navigation style of fullpage is a small black dot. It also supports setting other styles.

<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>

Copy after login

#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;
});

Copy after login

6. Problems encountered and solutions

When testing the website after it was completed, I found that the page I just entered , before the fullpage.js file has completed initialization, the DOM css is loading at this time, and all displayed style content will be crowded together, and will be restored after loading. If the website is optimized and the Internet speed is strong, this period of time will be relatively short, but it will still bring a bad user experience.

Then I tried various solutions:
1.div.section
section{overflow:hidden}
After testing, this method is of no use.

2. Set a blank mask. Only the mask will be displayed before all pages are completed, and the theme content will be hidden. After the loading is completed, the content display mask will be removed. Of course, you can also set website-related content in the mask layer.

Specific implementation method demo:

<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>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

For more articles related to fullpage.js full-screen scrolling plug-in usage examples, please pay attention to the PHP Chinese website!