One Page Few Page

Easy One Page Designs

Current Version: 2.5

Last Update: 02/10/2012

See Changelog
One Page Few Page - Easy One Page Designs
 

The One Page Few Page plugin allows you to create grid based one page layouts or you can use for other things if you need a unique style display.

Using this plugin is simple but may be a bit complicated for absolute beginners.

While creating this plugin the main goal was to make it as smooth as possible. The animations are smooth even with lots of contents because we're animating a fix sized body, so inner elements won't need to be rerendered/recalculated while/after animation.

    • One Page Layouts
    • Multiple Animation Types
    • Extremely Smooth
    • Highly Customizeable
    • Multiple Callbacks
    • Multiple Built-in Methods
    • Mobile Swipe Support
    • +20 Bonus Navigation Styles

Demonstration.

You can test the plugin with the following demo(s).
View Demo Envato Page

Basic Usage.

First Steps

You need to include the script and some CSS in your page.

  1. First load the plugin in your tag.
    <script src="jquery.opfp.min.js" type="text/javascript"></script>
  2. Now place the init code anywhere in the page, maybe you should put this in your <body></body> tag too.
    <script type="text/javascript">
    	$(document).ready(function(){
    		$.opfp();
    	});
    </script>
    
  3. You still need to adjust your CSS as the followings.
    html{
    	width: 100%;
    	height: 100%;
    	overflow: hidden;
    }
    
    body{
    	padding: 0;
    	margin: 0;
    }
    
    /* Used for the blocks, of course you need to change to your own selector */
    .page_item{
    	float: left;
    	overflow: hidden;
    }
    
    /* This will add vertical scrollbar if content is higher than window height.
    You may use a custom jQuery scrollbar plugin for this.*/
    .opfp_active{
    	overflow-y: auto !important;
    }
    

Mobile usage

Just add the following line to your section and set swipe parameter to true.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1">

Customizing the plugin.

Parameters

You can add parameters to your init code so you can change the plugins behavior.

Example (all parameters are optional):

$(document).ready(function(){
		$.opfp({
			cols: 4,
			speed: 2000,
			type: 'straight'
		});
	});

List of parameters

Option Description Data Type Default
cols Defines the number of columns the grid will have. Integer 1
type Defines type of animation.
Avaible values: straight, bezier, step
See 'Animation types' page for more details.
String straight
start_angle Start angle for BEZIER type animation.
Using the random keyword will choose a value between -300 and 300 on each switch.
See 'Animation types' page for more details.
Integer or String 0
end_angle End angle for BEZIER type animation.
Using the random keyword will choose a value between -300 and 300 on each switch.
See 'Animation types' page for more details.
Integer or String 0
length Length is the distance from the point to it's control point as a ratio of the distance from start to end in BEZIER type animation.
See 'Animation types' page for more details.
Integer 0.3
selector Defines the class used for blocks. Please use with dot in it. String .page_item
start Defines the blocks ID will be shown on load if you don't want to display first block. Integer 1
speed Travelling speed. Integer 1000 (1 sec)
firstStep Defines the direction of the STEP type animation.
Avaible values: col, row
See 'Animation types' page for more details.
String col
forceRefresh If you change parameters after loading the page (like the Customizer does) than you may need to refresh every variables of the plugin. It also recaculates the body and block widths. Boolean false
swipe Enables or disables swipe actions. Boolean false
loop Allows you to enable or disable the looping of the pages. Boolean true
heightOffset You can adjust height with positive or negativ number in pixels so the .page_item container won't take up the 100% of the height. Numeric 0
widthOffset You can adjust width with positive or negativ number in pixels so the .page_item container won't take up the 100% of the width. Numeric 0
watchResize Allows you to create even responsive and mobile styles as it will recalculate containers on browser resize. Boolean true

 

Animation types

 

Straight

This is the default animation type in OPFP. Simply it goes straight to the desired block crossing other blocks.

Step (firstStep: 'col')

Two step animation, first it will travel on the current blocks column to the desired blocks row, than to the desired block.

Bezier

In this case the animation will travel on a Bezier Curve path which you can adjust to your likings.

Step (firstStep: 'row')

Two step animation, first it will travel on the current blocks row to the desired blocks column, than to the desired block.

Methods

There are some built in methods which you can use to create navigation menu for example.

Method list:

// Loads the next block after the active block. If you stand on the last, it will jump to the first.

$.opfp.next();


// Loads the previous block before the active block. If you stand on the first, it will jump to the last.

$.opfp.next();


// This will jump to block 10. You can use string as a parameter
// it's just need to include the block id, for example: page10

$.opfp.goTo(10);


// Example with a link (link href attribute: #page10)

$('nav a').click(function(e){
	e.preventDefault();
	$.opfp.goTo($(this).attr('href'));
});

Callbacks

OPFP comes with callbacks as well which you can use in different events. In OPFP you simply need to add your callback function as a parameter.

$.opfp({
	onBeforeLoad: function(){ alert('Hey! OPFP will be loaded!'); }
});

List of available callbacks

Parameter Description
onBeforeLoad Do something before OPFP starts execution.
onAfterLoad Do something after OPFP finished execution.
onBeforeSwitch Do something before switching a block.
onAfterSwitch Do something after switching a block.
onNext Do something when $.opfp.next() method is called.
onPrev Do something when $.opfp.prev() method is called.
onGoTo Do something when $.opfp.goTo() method is called.
onNoMore (NEW) Do something when you ran out of pages, both left or right. Only fires with swipe, next and prev methods.
onSwipe (NEW) Do something on swipe. No mather of direction.
onSwipeLeft (NEW) Do something when swiping left.
onSwipeRight (NEW) Do something when swiping right.
onSwipeUp (NEW) Do something when swiping up.
onSwipeDown (NEW) Do something when swiping down.

Markup Example

Here you find a fully working, 2x2 grid markup example with all CSS and JavaScript includes needed.

<style type="text/css">html{ width: 100%; height: 100%; overflow: hidden; }
			body{ padding: 0; margin: 0; }
			section{ float: left; overflow-y: auto; }</style>
		<script type="text/javascript"
			src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.opfp.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$.opfp({
					cols: 2
				});
			});
		</script>
		
/* You can add some navigation here */
Page 1
Page 2
Page 3
Page 4

Important things

The active block automaticly gets the .opfp_active class.

Log Of Changes.

Version 2.5.0. (02/10/2012)

  • Added widthOffset parameter.
  • Added heightOffset parameter.
  • Added watchResize parameter.
  • New demo created.
  • New documentation created.

 

Version 2.0.0. (25/06/2012)

 

  • Added Mobile Swipe support.
  • Added loop enable/disable option.
  • Added new callbacks, most of them because of swipe.
  • Updated to newest jQuery version (1.7.2)
  • Added Mobile Swipe support.

 

Version 1.0.1. (04/05/2012)

 

  • Some bugfixes.

 

Version 1.0.0. (04/04/2012)

 

  • First stable verision released.

Support.

You may use my online support (if i'm online :) )
Live Support

You can use the comments page on the Envato Product Page or write me here: [wintercounter AT gmail DOT com]