1. Why Peeling Page effect?

The Peeling Page is an effect is used by advertisers to show advertisements. Normally it appears at the top right corner of the page. By this effect advertisement can be shown which would occupy space larger than what is available on a page.

2. Tutorial site to create Peeling Page Effect – jQuery and Mootools

This tutorial will show you how to create Peeling Page effect using jQuery plug-in.

Simple Page Peel Effect with jQuery and CSS by Soh Tanaka

Page Peel Effect with jQuery.pagePeel by Simple Multimedia

This tutorial will show you how to create a cool Peeling Page effect using Mootools.

Page Peel Effect Using MooTools by David Walsh

This tutorial will show you how to create Peeling Page effect using peel.js JavaScript.

Create a Peel Away Effect using JavaScript

3. Additional resource to create Peeling Page Effect in Word press

Creating Page Peel Advertisement in Word press

4. Word press plug-in for Peeling Page Effect in your blog

Page Cornr

download plug-in

Page Peel

download plug-in

Creating Page Peel Advertisement in Word press

download plug-in

How to use?

Insert the jquery and jQuery UI libraries to the header section of html

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>

The HTML Structure is as follows.
In the example there is two vertical columns defined by div with class=”column” that hold our panels. You can increase the number of panels by adjusting the width in the style sheet for .column. Each panel is a div with class=”dragbox”. And the content of each panel resides within div
with class=”dragbox-content”.

	<div class="column" id="column1">
		<div class="dragbox" id="item1" >
			<h2>Handle 1</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item2" >
			<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item3" >
			<h2>Handle 3</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
	</div>
	<div class="column" id="column2" >
		<div class="dragbox" id="item4" >
			<h2>Handle 4</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here-->
			</div>
		</div>
		<div class="dragbox" id="item5" >
			<h2>Handle 5</h2>
			<div class="dragbox-content" >
				<!--Panel Content Here-->
			</div>
		</div>
	</div>

The CSS code

.column{
	width:49%;
	margin-right:.5%;
	min-height:300px;
	background:#fff;
	float:left;
}
.column .dragbox{
	margin:5px 2px  20px;
	background:#fff;
	position:relative;
	border:1px solid #ddd;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.column .dragbox h2{
	margin:0;
	font-size:12px;
	padding:5px;
	background:#f0f0f0;
	color:#000;
	border-bottom:1px solid #eee;
	font-family:Verdana;
	cursor:move;
}
.dragbox-content{
	background:#fff;
	min-height:100px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	background: #f0f0f0;
	border:1px dashed #ddd;
}
.dragbox h2.collapse{
	background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
	font-size:11px; font-weight:normal;
	margin-right:30px; float:right;
}

The JavaScript Code
This code is to make the boxes dragable and droppable for this we will be using Portables function from jQuery UI library.

$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
})
.disableSelection();

In this the connectWith lets you move panels across different columns and handle defines the tag which is used to drag the panel. The placeholder parameter is the CSS class to use for the panel placeholder which is displayed when you drag a panel to show the possible position of the dragged panel. forcePlaceholderSize makes sure that placeholder size is equal to the size of the dragged panel and at last opacity sets the opacity of the panel while dragging.
To collapse the content of a panel box when you click on the panel header and show the configure link on panel header on hover, use the below code in jQuery document ready function.

$('.dragbox').each(function(){
    $(this).hover(function(){
        $(this).find('h2').addClass('collapse');
    }, function(){
        $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
        $(this).find('.configure').css('visibility', 'visible');
    }, function(){
        $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function(){
        $(this).siblings('.dragbox-content').toggle();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
});

One thing you’ll notice after adding this code is that when you drag the panel, the content of the panel toggles as when you drag the click event of panel header also fires that toggles the state of content. To fix this, you need to add another parameter to storable so that when drag is finished, state of content does not toggle.

$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
        $(ui.item).find('h2').click();
    }
})
.disableSelection();

Here I added another parameter stop that defines the function to use when drag is complete. Once the drag is complete, click event of panel header is fired so that the original state of content is restored.

You can view the demo here
Download the source file from here.

Some sites that explains Drag and Drop

Wil-linssen

Brothercake

Snook.ca

Chris Bolson

1. The HTML code of the menu

In this the “ul” tag is the menu container and each “li” is menu-item.

<ul class="lavaLamp">
            <li><a href="#">Home</a></li>
            <li><a href="#">Plant a tree</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Ride an elephant</a></li>
</ul>

2. The CSS code

The CSS used in example is as follows

/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("../image/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("../image/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

3. JavaScript

Include the following code to the head section of HTML.

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="path/to/jquery.easing.js"></script>

<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

You can download the source file from gmarwaha. Please click here to get the latest version

1. Parallax Explained

For web designs it is the layered movement animation of background images when we do browser resize or mouse move or scrolling. It makes us the feel the depth between the images.

For further definition of parallax please check here

2. Some sites that use Parallax

Dezignus

Eric Johansson

Silverback

3. Tutorial site to create Parallax – jQuery and Mootools

This tutorial will show you how to create a cool Parallax efftect using jQuery and the jParallax jQuery plugin.

Webdev.stephband

Progtuts

This tutorial will show you how to create a cool Parallax effect using Mootools .

Piksite