Peeling corner on a webpage

By Posted in - Web Design Tips on July 8th, 2009 0 Comments

Look at the top right corner of this page:  see that peeling corner?  Go ahead–peel it back.  This peeling corner effect is an interactive way of advertising that has become popular in recent years as popups have become a thing of the past.  You can easily add this effect to your website following these easy steps:

1.  Download the source files by clicking here.  (zip file)

Extract the files and open up the peel.js file.  Now edit the file with your favorite programming editor.  Search for the following code line:

jaaspeel.ad_url = escape('http://www.bcdesignsit.com/');

Change this value to the website you want your corner to re-direct too when people click on it. Save your peel.js file.

2.  As you can see in the source files, there are two images that are referenced: 

  • small.jpg A 100×100 px image, used when the peeling effect is inactive.
  • large.jpg A 650×650 px image, will be shown when a user mouse-overs the peel.

Create your own images that you will be using for the peeling effect, using the same file names and dimensions.

3.  The file also references two flash files.  No need to edit these.  You’re all set to upload the files to your web server. Upload the following files that you extracted from the source_files.zip to the following directory:  http://www.yourdomain.com/peel

  • peel.js
  • small.jpg
  • small.swf
  • large.jpg
  • large.swf

4.  Now add the following line to the body of your webpage. Make sure your source (src) direction is correct.

<script src="peel/peel.js" type="text/javascript"></script>

Refresh your page and you should have a nice peeling corner effect!  And for you WordPress users, there is a nice little plugin that does all the work for you.  Visit: http://www.webpicasso.de/blog/wordpress-pagepeel-plugin/ to download.    Happy peeling!

Please leave a Comment