{tocify} $title={Table of Contents}
Many ways to enhance the look of a website and blog. One way is to create a page can fold like a book that opened from the top edge. If we direct the cursor to the upper right corner, far corner of the website and the blog will open slightly. Such an effect is called a page peel effect. With page peel effect, so you can put something more interesting. For example, an RSS feed, facebook fan page, banner ads and more.
To create a page peel effect quite easily. Use jQuery, scripts can be placed on the blog with the wordpress platform, blogger or in your own cms website. For how to create a page peel effect, follow the steps below
In this tutorial, we will take the example of how to create a page peel effect for banner ads.
jQuery Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>Put external link between <head> and </ head>
jQuery Page Peel Script
<script>
/*!
* jQuery Peelback
*/
(function($) {
$.Peelback = function(el, settings) {
//Caching
var base = this;
base.$el = $(el);
base.el = el;
base.$el.data("Peelback", base);
//Main stuff
base.init = function() {
//Vars
var peelHTML, peelImage, peelMask, smallSize, bigSize, smallMaskSize, bigMaskSize;
//Defaults, meet Settings
base.settings = $.extend({},$.Peelback.defaultSettings, settings);
//If ad image is missing, stop the show
if (typeof(base.settings.adImage) !== 'string' || base.settings.adImage === '') {
if ( base.settings.debug === true) {
console.log('Ad image missing');
}
return;
}
//If peel image is missing, stop the show
if (typeof(base.settings.peelImage) !== 'string' || base.settings.peelImage === '') {
if ( base.settings.debug === true) {
console.log('Peel effect image missing');
}
return;
}
//If click URL is missing, stop the show
if (typeof(base.settings.clickURL) !== 'string' || base.settings.clickURL === '') {
if ( base.settings.debug === true) {
console.log('Click URL missing');
}
return;
}
//Convenience vars and set mask size
smallSize = base.settings.smallSize + 'px';
bigSize = base.settings.bigSize + 'px';
smallMaskSize = (base.settings.smallSize - 3) + 'px';
bigMaskSize = Math.floor((base.settings.bigSize * 0.96)) + 'px';
//Assemble
peelHTML = $('<div id="peelback"><a href="' + base.settings.clickURL + '" target="_blank"><img src="' + base.settings.peelImage +'" alt="" border="0" /></a><div></div></div>');
peelImage = peelHTML.find('img');
peelMask = peelHTML.find('div');
$(peelImage).css({
'width': '0',
'height': '0',
'z-index': '99',
'position': 'absolute',
'right': '0',
'top': '0',
'-ms-interpolation-mode': 'bicubic'
});
$(peelMask).css({
'width': '0',
'height': '0',
'overflow': 'hidden',
'position': 'absolute',
'right': '0',
'top': '0',
'background': 'url(' + base.settings.adImage + ') no-repeat right top'
});
//Insert
base.$el.prepend(peelHTML);
//Auto animate option
if (base.settings.autoAnimate === false) {
$(peelImage).css({ 'width' : smallSize, 'height' : smallSize });
$(peelMask).css({ 'width' : smallMaskSize, 'height' : smallMaskSize });
} else {
$(peelImage).delay(500).animate({
width: smallSize,
height: smallSize
}, 500);
$(peelMask).delay(500).animate({
width: smallMaskSize,
height: smallMaskSize
}, 500);
}
//Hover behavior
peelHTML.hover(
//Mouseover
function() {
$(peelImage).stop().animate({
width: bigSize,
height: bigSize
}, 500);
$(peelMask).stop().animate({
width: bigMaskSize,
height: bigMaskSize
}, 500);
//If GA tracking enabled
if (base.settings.gaTrack === true) {
if (typeof(_gaq) != 'undefined') {
_gaq.push(['_trackEvent', 'Ad_Interaction', 'Peelback', base.settings.gaLabel]);
} else {
if (base.settings.debug === true) {
console.log('Google Analytics _gaq object undefined');
}
}
}
},
//Mouseout
function() {
$(peelImage).stop().animate({
width: smallSize,
height: smallSize
}, 400);
$(peelMask).stop().animate({
width: smallMaskSize,
height: smallMaskSize
}, 400);
}
);
};
// Run initializer
base.init();
};
$.Peelback.defaultSettings = {
adImage : null,
peelImage : null,
clickURL : null,
smallSize : 70,
bigSize : 310,
gaTrack : false,
gaLabel : 'default',
autoAnimate : true,
debug : false
};
$.fn.peelback = function(settings) {
return this.each(function() {
(new $.Peelback(this, settings));
});
};
})(jQuery);
</script>
If you want to resize a page peel, replace the numbers marked in red color. Put this jQuery between <head> and </ head>jQuery / Javascript To Show Page Peel Structure
<script>
$(function(){
$('body').peelback({
adImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLBujLyfhXCnDpgT9c0X9AaXjFserSeJkHuT8CVBezKTauwY2o0IYW3iFlY38cBxysf5tyN4A2kT953QjlS4dY3oXJakD4CHyH5D3GdFafAGtty_yBZ7bVSsheuN1Y9Wk4gSzY-fVudM_T/s1600/Create+A+Page+Peel+Effect+With+jQuery+CSS+Plugin+1.png',
peelImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDK-6q2i0rWpsc7dcLKngroDWSKIEmHHGZNlIFdktXHT8BosND4ld0CcRjCqewdD7QFKz7wVE_p6ZVzgHLpvvKu-w9DIfjs09p0YWMDpLDIGuRQLfH_MrruWdmN_QYNy2FrgPVh8ws7en/s1600/Create+A+Page+Peel+Effect+With+jQuery+CSS+Plugin+3.png',
clickURL : 'http://yxero.blogspot.com',
gaTrack : true,
gaLabel : '#1 ',
autoAnimate: true
});
});
</script>
Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLBujLyfhXCnDpgT9c0X9AaXjFserSeJkHuT8CVBezKTauwY2o0IYW3iFlY38cBxysf5tyN4A2kT953QjlS4dY3oXJakD4CHyH5D3GdFafAGtty_yBZ7bVSsheuN1Y9Wk4gSzY-fVudM_T/s1600/Create+A+Page+Peel+Effect+With+jQuery+CSS+Plugin+1.png with your preferred image link, This is the banner image that will be displayed. Replace http://yxero.blogspot.com with your ads link.If you will create a page peel effect for facebook fans page, use this jQuery script to show page peel structure :
<script>
$(function(){
$('body').peelback({
adImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5_RkFEhvHo47yhv-1CXHAwV6JiaflxmGY-rmh0AxKrCZ_enACzWRapuIZ_KV_iZRzQHQxfCwRh17QlKvSWOCUv3duBRmqyG1YFxqprq2UzxfwH5uS__E0juRuNZ1edO7i5AVqTT6v-FOC/s1600/Create+A+Page+Peel+Effect+With+jQuery+CSS+Plugin+2.png',
peelImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDK-6q2i0rWpsc7dcLKngroDWSKIEmHHGZNlIFdktXHT8BosND4ld0CcRjCqewdD7QFKz7wVE_p6ZVzgHLpvvKu-w9DIfjs09p0YWMDpLDIGuRQLfH_MrruWdmN_QYNy2FrgPVh8ws7en/s1600/Create+A+Page+Peel+Effect+With+jQuery+CSS+Plugin+3.png',
clickURL : 'http://facebook.com/facebook-page',
gaTrack : true,
gaLabel : '#1 ',
autoAnimate: true
});
});
</script>
Be sure to change the page peel size in jQuery Page Peel Script with number 210.See the results, it will be as shown below :
It's finished for this tutorial
Hopefully can help and understand.
Good luck to you.