Code Monkey home page Code Monkey logo

fullpage's Introduction

fullpage

this is my fullpage plugin based on jQuery for desktop and mobile you can use it for creating your personal pages and webApp Here is a Demo on PC Here is another Demo on mobile

##Usage Fullpage needs to follow a simple.Here is the structure of HTML

	<div id="myFullpage">
		<div class="section">
			<!-- your own code here-->
		</div>
		<div class="section">
			<!-- your own code here-->
		</div>		
	</div>

Here you do not need to set the HTML of navbar,it will be create by js

	$("#myFullpage").fullpage({
			speed:800,   //speed of scrolling
			navigation:true,	  //create the navbar
			navpos:"right",	//the position of navbar
		//	navigationTooltips:["section1"],//tooltips of navbar
			continuous:false,		//continuous at the first or last section
			keyboard : true,				//support keyboard
			mobile : true,					//support touch event in mobile
			method : "swing",				//the method of animate in jQuery
			horizontal : false,				// horizontal or vertical
			onLeave : function(index){		//what todo before leaving the section
											//index means the number of current section
			},
			afterLoad : function(index){	//what todo after coming to the new section 
											//index means the number of current section
			}
	})

##setting

  • speed (default:800) - the speed of scrolling 切换页面所需时间

  • navigation (default:true) -whether or not you will have a navbar 是否有navbar的设定

  • navpos (default:right) - the position of navbar ,which can be 'right' 'left' or 'bottom' 导航条的位置

  • navigationTooltips - tooltips of navbar

  • continuous -continuous at the first or last section 在第一页和最后一页是否可以继续切换

  • keyboard -support keyboard 是否支持键盘事件,仅支持方向键切换

  • mobile -support touch event in mobile 是否支持移动端的touch事件

  • horizontal (default:false)- horizontal or vertical 是否是水平的 默认为垂直的

  • onLeave -what todo before leaving the section 离开页面时的回调函数,此时的index是要离开页面的index

  • onLeave -what todo after coming to the new section 进入新页面的回调函数,此时的index是新页面的index

you can also use data-speed data-method data-navpos to set

fullpage's People

Contributors

jiangshanmeta avatar

Watchers

James Cloos avatar Benson avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.