当前位置：首页 > 网页特效 > 滚动

fullPage.js页面全屏滚动插件

分类：滚动日期：2024-05-14 点击(0) 评论(0)

fullPage.js页面全屏滚动插件

简介

在页面中引入下面的fullpage.css和fullpage.js文件。

```html
<link rel="stylesheet" type="text/css" href="fullpage.css" />
 

<script src="vendors/easings.min.js"></script>
 

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
 
<script type="text/javascript" src="fullpage.js"></script>
```
#####  HTML结构
HTML文件中的首行HTML代码必须使用HTML DOCTYPE 声明，否则可能会遇到代码段高度问题。HTML 5 doctype中的示例： <!DOCTYPE html>

每个代码段定义为包含section类的元素。 第一个代码段作为主页，是默认激活代码。 代码段应进行封装（即div id="fullpage"）。 封装不能是body元素。

```html
<div id="fullpage">
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>
```
#####  初始化插件 初始化插件
使用纯javascript来初始化。

```html
new fullpage('#fullpage', {
  //options here
  autoScrolling:true,
  scrollHorizontally: true
});
 
//methods
fullpage_api.setAllowScrolling(false);
```
通过jquery来进行初始化。

```html
$(document).ready(function() {
  $('#fullpage').fullpage({
    //options here
    autoScrolling:true,
    scrollHorizontally: true
  });
 
  //methods
  $.fn.fullpage.setAllowScrolling(false);
});
```
#####  配置参数
fullPage.js的可用配置参数如下：

```html
var myFullpage = new fullpage('#fullpage', {
  //导航
  menu: '#menu',
  lockAnchors: false,
  anchors:['firstPage', 'secondPage'],
  navigation: false,
  navigationPosition: 'right',
  navigationTooltips: ['firstSlide', 'secondSlide'],
  showActiveTooltip: false,
  slidesNavigation: false,
  slidesNavPosition: 'bottom',
 
  //滚动
  css3: true,
  scrollingSpeed: 700,
  autoScrolling: true,
  fitToSection: true,
  fitToSectionDelay: 1000,
  scrollBar: false,
  easing: 'easeInOutCubic',
  easingcss3: 'ease',
  loopBottom: false,
  loopTop: false,
  loopHorizontal: true,
  continuousVertical: false,
  continuousHorizontal: false,
  scrollHorizontally: false,
  interlockedSlides: false,
  dragAndMove: false,
  offsetSections: false,
  resetSliders: false,
  fadingEffect: false,
  normalScrollElements: '#element1, .element2',
  scrollOverflow: false,
  scrollOverflowReset: false,
  scrollOverflowOptions: null,
  touchSensitivity: 15,
  normalScrollElementTouchThreshold: 5,
  bigSectionsDestination: null,
 
  //可访问
  keyboardScrolling: true,
  animateAnchor: true,
  recordHistory: true,
 
  //设计
  controlArrows: true,
  verticalCentered: true,
  sectionsColor : ['#ccc', '#fff'],
  paddingTop: '3em',
  paddingBottom: '10px',
  fixedElements: '#header, .footer',
  responsiveWidth: 0,
  responsiveHeight: 0,
  responsiveSlides: false,
  parallax: false,
  parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
 
  //自定义选择器
  sectionSelector: '.section',
  slideSelector: '.slide',
 
  lazyLoading: true,
 
  //事件
  onLeave: function(origin, destination, direction){},
  afterLoad: function(origin, destination, direction){},
  afterRender: function(){},
  afterResize: function(width, height){},
  afterResponsive: function(isResponsive){},
  afterSlideLoad: function(section, origin, destination, direction){},
  onSlideLeave: function(section, origin, destination, direction){}
});           
```

web299.com

fullPage.js页面全屏滚动插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果