Peeling style on top corner of browser using peelback jquery | 2my4edge

25 February 2022

Peeling style on top corner of browser using peelback jquery

I'm going to tell you about peeling style ads displaying on top right corner of the page on mouse hover using peelback jquery. peelback jquery is to peel the webpage to display something like you can see in the demo page, this is not only for ads displaying. we can use this for designing purpose. this looks cool in web page, avoid putting ads on it just use it for some other special designing purpose. let me tell you the details about the peelback jquery.

Peeling style on top right corner
DOWNLOAD                      LIVE DEMO

Peeling style design for web page on top right corner using peelback jquery. This is really light weighted one.

ORIGINAL SOURCE : GITHUB LINK

REQUIRED
adImage : path to the ad image (string)
peelImage : path to "peel-image.png" (string)
clickURL : click-through URL for the ad (string)

OPTIONAL
smallSize : Specify size of small peel preview (number; default=58)
bigSize : Specify size of full size ad image (number; default=510)
gaTrack : Send peelback events to Google Analytics? (boolean; default=false)
gaLabel : GA event label to use (string; default="default")
autoAnimate : animate peelback corner on pageload (boolean; default=true)
debug : display errors in console (boolean; default=false)

SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.peelback.js"></script>  
<script>
  $(function(){
  $('body').peelback({
    adImage     : 'peel-ad.png',
    peelImage   : 'peel-image.png',
    clickURL    : 'http://2my4edge.com',
    smallSize   : 50,
    bigSize     : 500,
    gaTrack     : true,
    gaLabel     : '#1 Stegosaurus',
    autoAnimate : true,
    debug       : false 
  });
}); 
</script>

I hope you really like this post. and it may helpful to designers. Thanks. Keep visiting. 

No comments:

Post a Comment

^