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>If you want to resize a page peel, replace the numbers marked in red color. Put this jQuery between <head> and </ head>
/*!
* 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>
jQuery / Javascript To Show Page Peel Structure
<script>Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9711XRej0lEiiAxlS1yIobFdumL3_UH7aa1mTcF_jr5AEiZ58dxwlZEnvgF2EeJmfvasKsvdw_7SiRAQAbcZkmSGus4w_VmKgdwdbZWh9-o4XVweCTwcONOhnV81law1FTfwtM2ww1xvK/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.
$(function(){
$('body').peelback({
adImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9711XRej0lEiiAxlS1yIobFdumL3_UH7aa1mTcF_jr5AEiZ58dxwlZEnvgF2EeJmfvasKsvdw_7SiRAQAbcZkmSGus4w_VmKgdwdbZWh9-o4XVweCTwcONOhnV81law1FTfwtM2ww1xvK/s1600/Create+A+Page+Peel+Effect+With+jQuery+CSS+Plugin+1.png',
peelImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6HXgv3he1stZR5BbWd0o06Qp04xVdclytjKJQmszuW8yk7macxC8Au3c2aXqP6a5cNPoJs8bEnJKq8mPyWp9LrjZYH-7xc3Qdl9x3LKUH4xi9Hy_u3WxHVVSpmuHrTXh2_TfGyhRnIsH/s1600/Create+A+Page+Peel+Effect+With+jQuery+CSS+Plugin+3.png',
clickURL : 'http://yxero.blogspot.com',
gaTrack : true,
gaLabel : '#1 ',
autoAnimate: true
});
});
</script>
If you will create a page peel effect for facebook fans page, use this jQuery script to show page peel structure :
<script>Be sure to change the page peel size in jQuery Page Peel Script with number 210.
$(function(){
$('body').peelback({
adImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrG73zM5B8OxE9OlZVtxBHNZz1hqwMNkA6xl8JKKWMPUj3ki63D83TY81HHGzOMSxAXOwrCz05tCT97Zas7HM9vZS8zbbY98am9Z-JJViWgV0cRR34xWZH34TN2jhZQrIOdrqhYKsrQCwI/s1600/Create+A+Page+Peel+Effect+With+jQuery+CSS+Plugin+2.png',
peelImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6HXgv3he1stZR5BbWd0o06Qp04xVdclytjKJQmszuW8yk7macxC8Au3c2aXqP6a5cNPoJs8bEnJKq8mPyWp9LrjZYH-7xc3Qdl9x3LKUH4xi9Hy_u3WxHVVSpmuHrTXh2_TfGyhRnIsH/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>
See the results, it will be as shown below :
It's finished for this tutorial
Hopefully can help and understand.
Good luck to you.