web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
滚动
fullPage.js页面全屏滚动插件
分类:
滚动
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
在页面中引入下面的fullpage.css和fullpage.js文件。 ```html
``` ##### HTML结构 HTML文件中的首行HTML代码必须使用HTML DOCTYPE 声明,否则可能会遇到代码段高度问题。HTML 5 doctype中的示例: 每个代码段定义为包含section类的元素。 第一个代码段作为主页,是默认激活代码。 代码段应进行封装(即div id="fullpage")。 封装不能是body元素。 ```html
Some section
Some section
Some section
Some section
``` ##### 初始化插件 初始化插件 使用纯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){} }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告