This is a jQuery plugin for adding a "peelback" or "peelaway" ad to a page. It's based on this peelback demo, by Soh Tanaka, which achieves the peelback effect by animating the ad image (the background image) and the peel image in parallel.
Download jQuery Peelback Ad githubSome features:
- Except for the two images, everything is contained in the plugin, which means you can add this to your site without having to touch your stylesheets or HTML.
- Lightweight. The script and the peel effect image combined are only 7.3KB.
- Plugs into Google Analytics Event Tracking to record the mouseover/peelback event.
- Works in all modern browsers as well as IE6, IE7, and IE8.
How to use it:
Just call the .peelback()
method on the body
element and fill in the parameters.
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)
$(function(){ $('body').peelback({ adImage : 'peel-ad.png', peelImage : '../assets/peel-image.png', clickURL : 'http://www.site.url/', smallSize : 50, bigSize : 500, gaTrack : true, gaLabel : '#1 Stegosaurus', autoAnimate : true, debug : false }); });