If you haven't seen it by now, check out the upper right corner of this page, or check out the new page peel in the bottom left of this box!
Now, the one contained inside of the box has its limitations. You have to have enough room to display the full page out (this one's set up as 500x500). Also, I've set the bottom padding of this box to 105px so I don't cover any content. You could also indent the content 105px or just cover your content. Whatever floats your boat.
I guess I should show you a bit of code on how to accomplish this... here it goes.
To add this you'll need jQuery and jQuery.pagePeel.js, then add the following to the head of your document:
<div id="pagePeel"> </div>
The area in bold is the DOM element you want place the page peel inside of. If you want to add it to the body, place it right under the opening '<body>' tag. If you want it added inside a div, place it right after the opening '<div id='yourDiv'>' tag. Be sure that div's position is set to relative in you CSS.
options, options, options... That's the main thing I think about when building plugins, and this one is filled with them. They go inside the open/close brackets The ones displayed are the default options.
SET WIDTH / HEIGHT OF SMALL AD
smallBG: 'pp-src/smallBG.png' // if you are not using flash, this is where your small ad image is located
SET WIDTH / HEIGHT OF INTRO
SET WIDTH / HEIGHT OF BIG AD (SAME AS .SWF)
bigBG: 'pp-src/bigBG.png' // if you are not using flash, this is where your large ad image is located
bigAd: 'pp-src/bigAd.jpg' // if you are using flash, this is where your ad image is located
bigSWF: 'pp-src/page-peel-big.swf' // if your flash file is in a different directory
ADD LINK AND TARGET OPTIONS
adLink: 'blank' // this is where you insert a URL (i.e. http://www.smple.com) || if left 'blank' no link will be applied
adLinkTarget: '_blank' // this is where you specify your target (i.e. '_parent' or '_blank')
SET POSITION OF YOUR AD
hPosition: 'right' // can use 'left' or 'right'
vPosition: 'top' // can use 'top' or 'bottom'
CHOOSE WHETHER TO USE FLASH OR NOT
note: Only upper-right source .fla's are included for both with or without an intro. There is also a lower-left for demonstration purposes. Feel free to edit the files to suite your needs, but remember to change the file path if you change the file name.
WHETHER TO USE INTRO ANIMATION OR NOT AND WHAT FILE TO USE
bigSWFIntro: 'pp-src/page-peel-big-intro.swf' // this is the default file location for the intro animation file
note: The intro option is currently set up to only work in the upper-right hand corner, however can be changed if you edit the source .fla.
Right now I've only got 1 other one, but be assured, the list will grow.
jQuery Link Control: A jQuery plugin designed to give the end user control over whether they want to open a link in a new window or not without having to right click and such.
jQuery.pagePeel.1.2.1 - Quick fix, when using an intro animation the holder was set to 300x300 and when moused over, the user couldn't access content behind it. Now when the user mouses over the div magically pops back to the default small size until moused over.
In a nutshell, I'm allowing content behind the intro animation to be clicked.