FerroLayers jQuery Plugin
December, 27 2013
Version 1.0
Purchase on CodeCanyon
Compatibility : firefox chrome safari internet explorer opera android ios
This plugins allows you to organize the contents of websites in a unusual and supersonic way and navigate through them with folding/zooming effects.
You can use 3 axes of trasition : X,Y and Z. Read further for a deeper explanation.
You can organize any type of HTML element in layers and tiles, as we'll see.
ferroLayers is really simple to use, due to the multiple available plugin's options.

For any comment, bug, personalization request or doubt, you can send me an email to madferro@gmail.com, or use the comments section.
FerroLayers allows you to:
How to use
1. Include nessessary JS files
You need to include ferroLayers's css and source javascript file.
Obviously you need to include jQuery library.

2. Create some HTML content
Create some HTML content that will be arranged on layers, e.g. :
<div id="layer1" class="layer">
<div id="layer2" class="layer">
<div id="layer3" class="layer">

3. Let's rock!!!
Fire plugin using jQuery selector.
$(document).ready(function() {
The initialization is called giving jQuery the class of layers elements.
If the initialization is called as above, the plugin will use it's default values, otherwise you can give some custom parameters, e.g. :
$(document).ready(function() {
		time : 800,
		perspective : 700,
		origin : "left center",
		tilesClass : "tile"
Read the Options section for a deeper explanation of custom parameters.
The available parameters for this plugin are the following:

Parameter Available values Default value Description
ajaxLoading true | false false use AJAX to load contents
ajaxScript path to the script null script used to load contents via AJAX
axis 'x' | 'y' | 'z' 'y' transition axis. X and Y will perform a rotation transition, respectively vertically and horizontally, Z instead will perform a zoom transition
easing string cubic-bezier(1.000, 0.000, 0.000, 1.000) animation easing. You can use every HTML5 compliant or customized jQuery Transit's easing function
firstLayer string null id of the first element to be displayed by ferroLayers. If not specified ferroLayers will show the first element found that matches the selector given in the initialization phase
forceAjaxReload true | false false force AJAX content loading for each layer. By default is set to false, so the contents are loaded by AJAX only once
origin string 'left center' CSS transformation origin parameter. According to the transition axis it can be changed to perform the best transition available. This parameter is composed by <horizontal position> <vertical position>.
Horizontal position can be 'left', 'right', 'center', pixels (e.g. 10px) or percentage (e.g. 10%)
Vertical position can be 'top', 'bottom', 'center', pixels (e.g. 10px) or percentage (e.g. 10%).
perspective number 1000 CSS perspective parameter
randomizeTiles true | false false Randomize tiles transition order. Every tiles is delayed in it's transition by a random number of millisecs included between the values of randomTilesMinDelay and randomTilesMaxDelay params
randomTilesMaxDelay number 1000 Max random delay time. This param will be considered only if randomizeTiles is true
randomTilesMinDelay number 0 Min random delay time. This param will be considered only if randomizeTiles is true
tilesClass string null class that identifies the tiles to be animated
tilesGroupDelay number 200 transition delay for each tiles group
tilesSingleDelay number 50 transition delay for every single tile
time number 600 transition time in millisecs

3 Axes Transitions
With the axis option you can choose the transition direction of layers and tiles. The transition can be customized even with the origin param. Available axes are:
Layers and tiles
ferroLayers arranges your contents in different layers that will animate to reveal/hide themselves. At a deeper level, you can set some of the contents as a "tile" i.e. a single element that will animate independently from the layer. The result is similar to the Windows Mobile transitions.

Every tile animates before the whole layer, see demo 1, demo 2 and demo 4 to better understand how the tiles behave.

Both layers and tiles are provided, meanwhile the transition duration, with a spacial class called transitioning. In this way you can change the aspect of layers and tiles in for the transition duration. At the end of the transition the class is removed. See demo 4 to better understand.

The whole layers can be wrapped in HTML elements as you need. For example you can choose to enclose layers in a div with id "container", which you can stylize with CSS as you want. All you have to do is simply:
<div id="container">
	<div id="layer1" class="layer">
	<div id="layer2" class="layer">
	<div id="layer3" class="layer">
See demo 4 for a real working example.
Contents of layers can be loaded only when needed via AJAX.
Realizing this is very simple: you must only set the 'ajaxLoading' parameter to true and set the path of the script that will load contents with the 'ajaxScript' parameter, and obviously, write the script.
The script can be written in any language compatible with the jQuery AJAX machine.

Pay attention: when using AJAX, FerroLayers calls the script giving the id of the element where the contents will be loaded. This is realized by an HTTP Request like this:


So in your script you can switch the contents to be loaded only by checking this value.
Ok I think an example will explain everything better, so here it is.
Let's see what I used in demo 2.
Here's the HTML:
			<div id="layer1" class="layer"></div>
			<div id="layer2" class="layer"></div>
			<div id="layer3" class="layer"></div>
Here's the Javascript:
$(document).ready(function() {
		time : 800,
		firstLayer : "layer2",
		perspective : 5000,
		axis : "x",
		ajaxLoading : true,
		ajaxScript : "ajaxLoading.php",
		origin : "center top", 
		tilesClass : "tile"
And this is ajaxLoading.php, the script that loads contents (written in PHP):
	case "layer1":
		... //echo html long content
	case "layer2":
		... //echo html long content
	case "layer3":
		... //echo html long content
The contents will be loaded only once, and then will be available until the page will be refreshed, unless the forceAjaxReload is set to true. In this case the content will always be reloaded via AJAX everytime a transition occurs.
Using AJAX is recommended only for heavy contents, such as big images, very long text, videos, music and so on.
Public functions
ferroLayers provides only two public methods that can be called from outside:
Function Parameter Description
$.fn.ferroLayers.goToLayer(layerId) layerId : id of the layer to go to go to the specified layer performing the transition
$.fn.ferroLayers.setTilesStyle() - refreshes tiles' CSS style. Can be useful after AJAX content loading, if some tile looks strange
ferroLayers provides some custom events:
These events add an object, called ferrolayers to the jQuery $.event object, which has two simple informations: To catch this events, you can do like this:
$(document).ready(function() {
		//do stuff
		//do stuff
		//do stuff
For a more detailed example, open the console and see demo 2. If you check the source code you will see the handling of the 3 events;
Here are some simple examples of different ferroLayers configurations.
  1. only specify tiles class, all the rest is default;
  2. customized transition time, starting layer, perspective, transition axis (x) and origin, min and max delay for random tiles transitions, random tiles transition order. AJAX loading, tiles layout and events handling;
  3. customized perspective, transition axis (z) and origin, easing function;
  4. customized perspective and single tiles delay, "transitioning" class customized with CSS. Layers wrapped in a container;
Get the latest version of ferroLayers: Purchase ferroLayers 1.0 on CodeCanyon
For any comment, bug, personalization request or doubt, you can send me an email to madferro@gmail.com.


Leave a comment here if you want.



Send comment