Create A Page Peel Effect With jQuery

{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.
Create A Page Peel Effect With jQuery CSS Plugin
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 :
Create A Page Peel Effect With jQuery CSS PluginCreate A Page Peel Effect With jQuery CSS Plugin
It's finished for this tutorial
Hopefully can help and understand.
Good luck to you.

Post a Comment

Please provide your comments related to the contents of the article above, comment politely and leave no spam. Thank you

Previous Post Next Post