jquery plug-in fullpage.js to achieve full screen scrolling effect _jquery

This example for you to share the full screen scrolling plug-in fullpage.js specific use of the method for your reference, the specific content as follows

0.01 basic presentation of HTML layout and JS code

Three files that require connection connections <link rel= "stylesheet" href= "Css/jquery.fullpage.css" >//css file <script src= "js/" Jquery-1.8.3.min.js "></script>//jquery 1.8.3 version <script src=" Js/jquery.fullpage.min.js "></scrip  Compressed version of the t>//fullpage plug-in <style> section {text-align:center; font:50px "Microsoft Yahei"; color: #fff;} You can change the settings is the text in the page < insignificant > </style> <script> $ (function () {$ (' #dowebok '). Fullpage ({//full Page is more important set is the basic settings of the plug-in after the Sectionscolor: [' #1bbc9b ', ' #4BBFC3 ', ' #7BAABE ', ' #f90 ']//sectionscolor when there is no background picture, this is set
Set the background color otherwise is the form of a blank array in the middle of a comma-separated color, whether it is hexadecimal or English words need to be wrapped in single quotes;
});
 </script> <div id= "Dowebok" >//Bound large box set scrolling box <div class= "section" >  

0.02 Insert background picture demo HTML layout and JS code < The files that need to be linked are the same >

<style>          //Note that there is no color set here but the background image set in CSS 0
. Section1 {background:url (images/1.jpg) 50%;
Section2 {background:url (images/2.jpg) 50%; 
Section3 {background:url (images/3.jpg) 50%;
Section4 {background:url (images/4.jpg) 50%;}
</style>
<script>
$ (function () { 
 $ (' #dowebok '). Fullpage ();     Find the big box set fullpage full screen scrolling
});
</script>
<div id= "Dowebok" >
 <div class= "section section1" ></div>
 <div class= "section section2" ></div>
 <div class= "section section3" ></div>
 <div class= "section section4" ></div>
</div>

0.03 loop demo HTML layout and JS code < The files that need to be linked are the same >

<script>
$ (function () {
 $ (' #dowebok '). Fullpage ({
  sectionscolor: [' #1bbc9b ', ' #4BBFC3 ', ' #7BAABE ') , ' #f90 '],//As above Sectionscolor is to set the color of each screen must be separated by commas in single quotes wrapped
  continuousvertical:false,         //Set whether to slide to the bottom layer and then scroll down is the first picture Set true is to do this to set false is not to perform default do not execute do not set
 }
); </script>
<div id= "Dowebok" >
 <div class= "section" >
   
 

0.04 callback Function Demo

<title>fullpage.js-callback function Demo </title> <link rel= "stylesheet" href= "Css/jquery.fullpage.css" > < Style>. section {text-align:center; font:50px "Microsoft Yahei"; color: #fff;} section2 p {position:relative; lef
T:-120%;} . section3 p {position:relative bottom: -120%}. section4 p {display:none;} </style> <script src= "js/jquery.m In.js "></script> <script src=" js/jquery-ui.js "></script> <script src=" js/ Jquery.fullPage.js "></script> <script> $ (function () {$ (' #dowebok '). Fullpage ({sectionscolor: [' # 1bbc9b ', ' #4BBFC3 ', ' #7BAABE ', ' #f90 '],//Set background color afterload:function (Anchorlink, index) {//scroll to a screen after the callback function, receive Anchorlin
       K and index two parameters, Anchorlink is the name of the anchor chain, index is ordinal, starting from 1 to calculate if (index = = 2) {$ ('. Section2 '). Find (' P '). Delay. Animate ({
    Find (' P ') searches for descendants in all paragraphs P element//delay (500) where the parameter is a delay value, the unit is the millisecond//animate () method performs a custom animation left: ' 0 ' for the CSS property set. }, 1500, ' Easeoutexpo ');
  JQuery easing animation effect extension } if (index = = 3) {$ ('. Section3 '). Find (' P '). Delay. Animate ({bottom: ' 0 '}, 1500, ' Easeoutexpo ');
    } if (index = = 4) {$ ('. Section4 '). Find (' P '). FadeIn (2000);  The FadeIn () method gradually changes the opacity of the selected element, from hiding to visible (fading effect)}}, Onleave:function (index, direction) {//rollback function, receiving index, Nextindex, and
   Direction 3 parameters: Index is the number of "page" left, calculated from 1,//nextindex is the serial number of the "page" that is scrolled to, starting from 1, and//direction to scroll up or down, the value is up or down.
   if (index = = ' 2 ') {$ ('. Section2 '). Find (' P '). Delay. Animate ({left: ' -120% '}, 1500, ' Easeoutexpo '); 
   } if (index = = ' 3 ') {$ ('. Section3 '). Find (' P '). Delay. Animate ({bottom: ' -120% '}, 1500, ' Easeoutexpo ');
    } if (index = = ' 4 ') {$ ('. Section4 '). Find (' P '). fadeout (2000); The fadeout () method gradually changes the opacity of the selected element, from visible to hidden (fading effect)}, Continuousvertical:false,//whether to scroll, and looptop and Loopbottom incompatible})
;
}); </script> <div id= "Dowebok" > <div class= "section Section1" >  

0.05 Bound menu method

<title>fullpage.js-Binding Menu Demo _dowebok</title> <link rel= "stylesheet" type= "Text/css" href= "css/" Jquery.fullPage.css "> <style> #menu {margin:0; padding:0; position:fixed; left:10px; top:10px; list-style-t Ype:none;
z-index:70;}  #menu li {float:left margin:0 10px 0 0; font-size:14px} #menu a {float:left; padding:10px 20px; Background-color: #fff; Color: #333;
Text-decoration:none;} #menu. Active a {color: #fff; Background-color: #333}. section {text-align:center; font:50px "Microsoft Yahei"; color
: #fff;} </style> <script src= "js/jquery.min.js" ></script> <script src= "Js/jquery.fullpage.js" >< /script> <script> $ (function () {$ (' #dowebok '). Fullpage ({sectionscolor: [' #1bbc9b ', ' #4BBFC3 ', ' #7BAABE ', ' #f 90 '],///Set color parameters anchors: [' Page1 ', ' page2 ', ' page3 ', ' page4 '],//define Anchor menu: ' #menu '//binding menus, set related properties corresponding to anchors values
After the menu can control scrolling});
}); </script> <ul id= "menu" > <li data-menuanchor= "Page1" CLass= "Active" ><a href= "#page1" > First screen </a></li> <li data-menuanchor= "Page2" ><a href= "# Page2 "> Second screen </a></li> <li data-menuanchor=" Page3 "><a href=" #page3 "> Third screen </a></li > <li data-menuanchor= "page4" ><a href= "#page4" > Fourth screen </a></li> </ul> <div id= " Dowebok "> <div class=" section ">  

0.06 Project Navigation Demo

<script>
$ (function () {
 $ (' #dowebok '). Fullpage ({
  sectionscolor: [' #1bbc9b ', ' #4BBFC3 ', ' #7BAABE ') , ' #f90 '],
  //Set the Color property
  ' navigation ': true,//
  whether to show that the project navigation defaults are false to set true
 };
</script>
<div id= "Dowebok" >
 <div class= "section" >
   
 

0.07 Automatic cycle scrolling

 <style>
Section {text-align:center font:50px "Microsoft Yahei"; color: #fff;}
</style>
<div id= "Dowebok" >
 <div class= "section" >
   
 

0.08 set the horizontal screen to play automatically

 <style> section {text-align:center font:50px "Microsoft Yahei"; color: #fff;} </style> <div id= "Dowe bOK "> <div class=" section ">  

0.09 turns off scrolling
  When judging the width of the current browser is less than;

<link rel= "stylesheet" type= "Text/css" href= "Css/jquery.fullpage.css" > <style>. Section {text-align: Center font:30px "Microsoft Yahei";
Color: #fff;} </style> <div id= "Dowebok" > <div class= "section" > <p> enable/Disable Full-screen scrolling based on visual region size </p> </div&
 Gt <div class= "section" > <p> if the viewport width is less than 1024, turn off full screen scrolling, use the scroll bar </p> </div> <div class= section "> <p> Please try to resize the browser and see if the scroll bar appears </p> </div> <div class=" section "> <p> Fourth screen </p> </ Div> </div> <script> $ (function () {$ (' #dowebok '). Fullpage ({sectionscolor: [' #1bbc9b ', ' #4BBFC3 ', ' #7BA
 ABE ', ' #f90 ']//Set color properties}); $ (window). Resize (function () {//Resize event occurs when resizing the browser window.
  The resize () method triggers the Resize event, or the function that runs when the Resize event occurs autoscrolling ();
 True to use the method of scrolling the plug-in, if False, the browser's own scroll bar});
  function autoscrolling () {var $ww = $ (window). width ();
   if ($WW < 1024) {$.fn.fullpage.setautoscrolling (false); SetautoscrolLing () sets the page scrolling mode and automatically scrolls to false without scrolling when set to true; {$.fn.fullpage.setautoscrolling (true);
} autoscrolling ();
});
 </script>

fullpage.js is a jQuery plug-in, the main function is to create Full-screen Web site fullpage plug-in compatibility is compatible IE7 browser to the rest of the mainstream browser does not describe the Fullpage Plug-ins support the following operations

1, the plug-in can use the mouse pulley for scrolling

2, when the vertical screen to support the keyboard up and down arrows scrolling horizontal screen control can be used is left and right arrow

3, can use multiple callback function to produce animation effect but need to involve jquery UI plug-in connection < below have >

4, Fullpage also support touch events such as touch-sensitive notebook tablet phone

5, can use the CSS3 animation in the attribute operation but should pay attention to the CSS3 compatibility

6, can adapt to the size of the screen

7, you can set the scrolling width of the page and whether the background color loop playback can be a callback function text can be set style

Use the file I refer to in fullpage specifically as shown below < must be aware of the link order first CSS file then jquery 1.8.3 is then Jquer ul or fullpage plugin > attention! The required link files can be downloaded as I ask for a message

<link rel= "stylesheet" type= "Text/css" href= "css/jquery.fullpage.css" > 
//This is to set the style needed for plug-in links
<script Src= "Js/jquery.min.js" ></script> 
//jquery 1.8.3 version
<script src= "Js/jquery-ui.js" ></ Script> 
 //JQuery UI version 1.12.1 < optional > required to set easing parameters must be linked otherwise error
<script src= "Js/jquery.fullpage.js" > </script> 
//Finally, this is the main fullpage plug-in

Configuration

1. Option

2. Methods

3. Callback function

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.