Home >Web Front-end >JS Tutorial >Fullpage.js full screen scroll plug-in usage example

Fullpage.js full screen scroll plug-in usage example

高洛峰Original: 2017-01-11 09:35:341459browse

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

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>

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>

5. Initialize fullpage

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

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>

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Full screen scrolling plug-in fullPage.js usage example analysisNext article：Full screen scrolling plug-in fullPage.js usage example analysis

See more

Fullpage.js full screen scroll plug-in usage example

Related articles