I just built the company website and scrolled through full screen, which significantly improved the browsing experience of the official website. So let’s summarize the method of using fullpage.js. Welcome to correct me
1. Introduction to fullpage.js
fullpage.js is a set of js plug-ins that implement full-screen scrolling of the browser. Many websites now use it to achieve a better browsing experience.
Functions that can be achieved:
•Support forward and backward and keyboard control
• Multiple callback functions
•Support mobile phone and tablet touch events
•Support CSS3 animations
•Support window zoom
• Automatic adjustment when window zooms
•Can set scroll width, background color, scroll speed, loop options, callbacks, text alignment, etc.
2. Plugin 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: You must first introduce jquery and then introduce fullpage. When I first started writing demo, the effect was not achieved due to the wrong order, and the browser error in fullpage.js. jquery is undefined.
4. Write html code
<div id="fullpage"> <div>section1</div> <div>section2</div> <div>section3</div> <div>section4</div></div>
All content is included in the div with the ID name fullpage, and you cannot add this to the body.
The div element with the class name .section is a single page. The replacement between different pages can be controlled through the mouse wheel and the keyboard, and the list navigation can also be set.
At the same time, if you want to make a horizontal screen-cut effect in a page, you can add div.slide in div.section. The code is as follows:
<div> <div> Slide 1 </div> <div> Slide 2 </div> <div> Slide 3 </div> <div> Slide 4 </div></div>
5. Initialize fullpage
$(document).ready(function() { $('#fullpage').fullpage( { ..... //options For details, please refer to https://github.com/alvarotrigo/fullPage.js/ } );});Setting up sidebar navigation
This navigation is generally available on the website design. The default navigation style of fullpage is small black dots, and it also supports setting other styles.
<ul id="myMenu"> <li data-menuanchor="firstPage"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
#myMenu{ position:fixed; ...} $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu'});6. Problems encountered and solutions
After the website was completed, I found that I just entered the page and before the fullpage.js file was initialized, the DOM css was loading, and all displayed style contents would be squeezed together and would be restored after loading. If the website is optimized and the Internet speed is very powerful, this period will be short, but it will still bring a bad user experience.
So try various solutions:
1.div.section
section{overflow:hidden}
After testing, this method has no use.
2. Set a blank mask, only the mask is displayed before all pages are completed, the theme content is hidden, and after loading, the content display mask is removed. Of course, you can also set up website-related content in the mask layer.
Specific implementation method demo:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Unt titled document</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='showAllContent("","none")'><div id="showLoad" style="z-index:2; display:block; width:auto; height:auto;">The page is loading...</div><div id="showContent" style="z-index:1; ">//The content to be displayed in the end </div>
<script>showAllContent("none","");</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.