Create A Peel Away Effect On Your Blog / Website

peel away

If you are wondering how some webmasters or bloggers create this little peel away effect on the top right corner of their website, that means it is successfully getting your attention and we assume that’ll make visitors curiously wanting to peel it off and see what’s in store.

This is certainly a very effective way to market products and bring more attention to pages you want visitors to focus. For webmasters cum online money makers, this can be a new interesting approach you can propose to advertisers. Creating a peel away effect on your website / blog is fairly simple. Full guide after jump.

Note: For wordpress users, you can skip doing this manually. This plugin will do the trick. Thanks Mohd Ismail.

1. Download required files

Download peel.zip (Alternative – Download), extract it. Your peel/ folder should contain these following files:

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

Plan where you should upload this folder at later stage. For Wordpress users, you are suggested to upload peel/ inside wp-content/themes/your_current_theme/. Fow now, let’s fire up your favorite text and image editor.

2. Edit peel.js

Open peel.js with your favorite text editor. Change these following settings:

jaaspeel.ad_url – URL you intend to point to.
jaaspeel.small_path – Path to small.swf
jaaspeel.small_image – Path to small.jpg
jaaspeel.big_path – Path to large.swf
jaaspeel.big_image – Path to large.jpg

Here’s an example, assuming the domain is hongkiat.com and I’m pointing it to google.com.

jaaspeel.ad_url = escape('http://www.google.com');
jaaspeel.small_path = 'http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/small.swf';
jaaspeel.small_image = escape('http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/small.jpg');
jaaspeel.big_path = 'http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/large.swf';
jaaspeel.big_image = escape('http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/large.jpg');

3. Edit the images

small.jpg – The small background visitors see before content behind gets revealed. Edit if you’d like to match it with your background.
large.jpg – What visitors will see after pointing their mouse to ‘peel the page off’. This is the image you’ll want to edit.

Both flash files, small.swf and large.swf can be left un-touch.

4. Upload files

Upload the entire peel/ folder to via FTP your web account. Make sure it matches with the settings you’ve entered earlier in Step 2.

5. Add Javascript in header

Add the following Javascript after <title> before </head>.

<script src="http://www.domain.com/peel.js" type="text/javascript"></script>

You are done! Refresh the website and you should notice a peel away effect on the top right corner of your site.

Comments

Mohd Ismail March 24th, 2008

or, if you are using Wordpress, you can download the plugin for peel ads at Peel Away Wordpress Plugin =)
Reply
hongkiat March 24th, 2008

Mohd Ismail: Thanks, I’ve just realized after having this entry live. Appreciate the heads up though.
Reply
Tech Blog March 24th, 2008

Anyway, that’s nice to see u code it urself.
Reply
Chris March 24th, 2008

Is there any way of getting it to open in the same window?
Reply
Joe March 25th, 2008

Is anyone else experiencing this not showing up in IE?
Reply
Yan March 25th, 2008

Wonderful! It certainly caught my attention and I like the peeling effect..
Reply
Courtney Miles March 27th, 2008

Very nice. Are you the author? If not, who is?

I can confirm that how it’s used on this site does not work in IE. But how it’s used on pvponline.com works fine.
Reply
Jordan March 27th, 2008

I love it. Have implemented it already. To get it to work on IE put the after the body tag. It works in IE and firefox then.

Well Done Hongkiat! Coolest thing i have seen for a long while!
Reply
Jordan March 27th, 2008

I love it. Have implemented it already. To get it to work on IE put the script after the body tag. It works in IE and firefox then.

Well Done Hongkiat! Coolest thing i have seen for a long while!
Reply
Joe March 27th, 2008

Awesome- thanks, Jordan! Hongkiat- this thing is great!
Reply
WhizKidz March 28th, 2008

Great…..I will use it on my next project. Thanks, John
Reply
RLV April 7th, 2008

no funciona, segui los pasos tal cual lo indican pero no agrega el efecto….
Reply
fedmich April 8th, 2008

wow, looks elegant :)
Thanks, im sure this will come in handy one day
Reply
rex April 9th, 2008

hi, can some tell me the code of NOT displaying the big 2nd picture and REPLACE it with:

automatically scrolling recent or random posts.
Reply
LcDude April 11th, 2008

Great script! I was wondering what needs to be done to make it work in the top left corner. I changed right to left, but the curl goes the wrong way.
Reply
popljubo April 14th, 2008

Great thing Hongkiat! Thank you for sharing.
Please [somebody] help me with code/expression to open the link in same window/tab
Reply
stanotmano April 16th, 2008

What script are you placing after the body tag for IE? I can’t get this to work
Reply
stanotmano April 16th, 2008

finally got it to work, now working on my flash object not covering up art of it . Any suggestions.
Reply
popljubo April 17th, 2008

stanotmano,
like Jordan said [on March 27th] in his coment about Step 5 – Add Javascript in header

“To get it to work on IE put the…” following Javascript after the tag:

don’t put the content of external JS [peel.js] file in your page!

It also works fain in IE, FF, Opera & Safari – Win/PC.
It Will be nice to hear from people who use different browsers on Mac, how it works!
Thank’s
Reply
Hendra April 18th, 2008

Nice peel away effect. Only one thing. I would like to remove the mirror effect that eppears on the swf. Do I change it in the peel.js, (please explain if done here), or is it scripting in the original flash file?
Reply
jemmBOo April 22nd, 2008

Step 1 – Download required files<– i got error, can you upload at rapidshare?
Reply
hongkiat April 22nd, 2008

@jemmBOo That link should be working. Anyway, I’ve provided another alternative download link. Check Step 1.
Reply
jemmBOo April 22nd, 2008

bro thanks for the Alternative link.. and thanks for the tutorial :)
Reply
MMR April 23rd, 2008

This seems to be quite a bit like the info found at the following site from Oct-2007.

http://www.marcofolio.net/webdesign/create_a_peeling_corner_on_your_website.html
Reply
Bettina April 28th, 2008

The effect isn’t showing up in IE 6.0. Did you find a way to solve that problem?
Reply
Bettina April 28th, 2008

Ooops, you are right, it works when the js tag is placed after the body tag…
Reply
Mike April 29th, 2008

I haven’t tried it yet but will this script work on a wordpress website?
Reply
mor10 May 5th, 2008

The problem with this and all the other similar scripts I’ve tried is that the peel shows up underneath some Flash elements like the Blip.tv player etc. I have yet to find a solution to this problem. If anyone has any suggestions, I’m all ears.

mor10
Reply
Seth May 7th, 2008

Just awesome! Thanks very much!!
Reply
loro May 13th, 2008

the peel freezes in IE7
Reply
Prasanna May 15th, 2008

Hello Every one

Hi i added this on my website but i have flash Banner on my website how to make the peel page appear above the Flash banner Plz Help me

By posting Comment or Emailing me Plzzzzzzzzzzzzzzzzz
Reply
marko May 25th, 2008

i have a problem with IE 7 , i can’t see the page peel.
Reply
busywriter May 28th, 2008

To POPLJUBO,

I run a Mac, using 10.4 (haven’t moved to the 10.5 Leopard). The peel away works perfectly in Safari and in Firefox. Sorry, don’t do Exploder so am unable to comment.

Hope this is a heads up for those of you wanting all your users to see the effect.
Reply
Markus May 29th, 2008

Hi,
has anybody a link to a working plain html site. I´m trying to implement it for the whole day. And it drives me nuts.
I realy don´t know where to put what, and I tried every combination. But it doesn´t work. Im using Firefox and Safari for testing.

Thanx for every hint.
Reply
paul77smith June 3rd, 2008

Nice file. I’ve one important question. Is there any copy right issue to use this script. Can this script be used on the commercial website anyway we want. Are you the author and allow the users to use this script on their websites.

Thanks
Reply
recursos web June 13th, 2008

gracias por estos recursos, aqui mas recursos para diversos temas
Reply
Todor Christov June 19th, 2008

Great work!

I implement the Peel effect in my blog and it looks great under Flock, Firefox and Internet Explorer. In order to run under IE, once must really put the code after the tag, not before the tag.

Thanks a lot for the hack!
Reply
Todor Christov June 19th, 2008

Something is wrong with my comment, so I will send it once again:

“In order to run under IE, one must really put the code after the “body” tag, not before the closing “head” tag.”
Reply
Charles June 19th, 2008

Tudor – Correct me if I’m wrong! So this code goes after the “head” tag and not before?
>>Something is wrong with my comment, so I will send it once again:

“In order to run under IE, one must really put the code after the “body” tag, not before the closing “head” tag.”
Reply
jon June 20th, 2008

I wish it was a little larger like 150×150. Can’t change cuz the fla files are not in the zip. Can’t change it in the .js file either.
Reply
Okizoo June 21st, 2008

Always wondered where this plugin was.
Reply
Tony June 21st, 2008

I love the peel away effect. I am going to try out the plugin. Thanks for sharing.
Reply
DeputyDog June 26th, 2008

This stuff is great, easy to use!! I love it and it is working great!! BUT! Is there any way to make the ad link NOT pop up a new window? A couple of options in the peel.js would be nice, like ‘target’ (self or new) and orientation (top/left, top/right, bottom/left, bottom/right)…
Reply
Ben July 5th, 2008

fantastic. we’ll look at using this
Reply
andy July 17th, 2008

Excelent Work, Thank you.
Reply
Vladimir July 18th, 2008

Awesome!!!!!!!!!!

No bags, amasing shadows!!!!!!

Would you share your FLA files?)))))
Reply
Keith August 10th, 2008

You Rule, thanks for the info…..
Reply
redson August 11th, 2008

thanks for writing this post. its really nice and i love it.
Reply
GreG August 15th, 2008

Hi guys. Just great this post. But… as some of us, i´m getting a problem with the flash banners that stay always above the peeling effect. Is there a solution for this??

Many Thanks…
Reply
GreG August 15th, 2008

Or … if not possible to put it above the Flash files, can we move ir to the left side of the window?
Reply
free software September 4th, 2008

software download is very good
Reply
kobos September 17th, 2008

NO FUNCIONA EN FIREFOX
Reply
chokilala September 21st, 2008

thanks. it works for blogger too :)
Reply
orlando September 22nd, 2008

hola el tuto esta muy bueno pero creoq ue tiene que ser más explicito.. por ejemplo si tengo un banner hecho en flash en la cabecera y el “Peel away Effect” en la esquina derecha superior como lo pongo si lo tapa ya intente como 4 tutos y funcionan

ayuda please
dolanor_24@hotmail.com
Reply
pornfox September 24th, 2008

I finally got it to work on IE7 but this txt is in my header now and i cant get it to work properly can u help me.

thanks heaps
Reply
Jon September 29th, 2008

I have experienced it not showing up in IE. How to fix that?
Reply
Dianellys Morato October 3rd, 2008

Thank you, thank you, thank you!
Very easy to implement! I just installed it in one of my client’s blogs and he and I are both loving it.

Cheers!
Dianellys Morato
Reply
Dan Walter October 4th, 2008

Doesn’t work.
Reply
Тодор Христов October 6th, 2008

Charles, #39 – yes, exactly. This is how it works in my blog.
Reply
doru October 17th, 2008

i can’t use this with any other size than 100 for small image and 650 for large image. it results in buggy behavior. check it out.
Reply
Hernan October 18th, 2008

I have installed a peel efect, but i want to set the small image a little bit biger. I put the small.jpg at 200×200 px and change the lines:
jaaspeel.small_width = ‘200′;
jaaspeel.small_height = ‘200′;
The result is a pixelated image not centered. How can i correct this??
Reply
Nicole October 21st, 2008

Thanks for sharing! LOVE the look of it, just would like to see something more flexible. I too am trying to resize to make the “big” part 400×400 but it’s not working out so well. Any chance of getting your source files?
Reply
Pierre November 13th, 2008

thank you so much. it works
Reply
Brett November 19th, 2008

For people who’s images look pixelated when editing the image sizes in the JS… you need to resize the image file itself to those same dimensions (in photoshop etc) otherwise the JS will resize the larger image and therefore pixelate the image.
Reply
Steve December 9th, 2008

Thanks for this.

I too would like to see this with an option to open NOT in a new window.
Reply
Javin December 10th, 2008

Thanks looking for it and got nice insight.
Reply
Jansen December 12th, 2008

Great job
looks amazing, works perfectly.
Reply
afperea December 12th, 2008

excelent good job
Reply
John December 12th, 2008

Great script! Will be using, thanks. Am considering making a jQuery plugin with this technique.
Reply
John January 8th, 2009

Finally, found the post the originally inspired me:) Here’s the jQuery plugin I developed for the page peel ad. There are some additional features and included .fla files for editing.

http://plugins.jquery.com/project/page-peel
Reply
Mens health Blog January 29th, 2009

I was using standalone javascript for making peel away scripts. I spend many hours to make it work in each blogs, because of template editing.

Just now I’ve used this plugin in one of my wordpress blog. It installed and worked like a charm. Thanks.
Reply
kris February 5th, 2009

i think im missing something on this. i cant get it to work. ive tried permission variations and everything. what could be the problem im overlooking. ive viewed it in firefox and IE..just cant get it
Reply
Ahmed Baig February 6th, 2009

hey thanks for that great trick but it doesnt seem to work in IE what do i do? to make it work in all brousers?
Reply
AdPeelers February 23rd, 2009

For those of you who like this script we have an updated version of the same kind of script, this comes with complete installer and database + admin area for uploading and deleting ads, wth this you can easily manage multiple ads within your peels thata re randomly picked when the page loads
Reply
Hans February 27th, 2009

Does work in IE7,
Chrome,
Safari (OS X and Windows XP),
Firefox (OS X)

It works even in Opera (OS X)

But…
mot in Firefox 3 (Windows XP and Vista) and yes, I’ve cleared the cache.

Bizar.
Reply
Hans February 27th, 2009

Sorry for the typo’s, it’s not my native language.
Reply
Michael March 15th, 2009

You should checkout http://www.FreePagePeel.com

It does the same thing but all you have to do it upload your pictures and it configures the JS files for you, presents you with a zip file of everything you need and a code snippet. Pretty slick, 100% free, no signups or restrictions or anything.
Reply
Dharini Jain March 23rd, 2009

itz not working in IE7.Is there anyone to help me out in this?
Reply
Synergy Informatics April 8th, 2009

Hi,

Fantastic effect… this was exactly, what we’re looking for.
Reply
Aaron April 15th, 2009

Hi
I have this script, its works but my main content is all flash, and the page peeler goes underneath, can any help?
The url is http://www.braziloilandgas.com
and my email is ameharhughes@gmail.com

Thanks in Advance
Aaron
Reply
viji April 23rd, 2009

hi..
i tried this code into my php localhost server for a single application.
i follwed wat u said
but stil i’m not having the peel on my site
Reply
viji April 23rd, 2009

sorry for the previous comment. its working well now.
but i have flash banner. how to make the peel above the flash banner.
Pls anyone help me by intelviji@gmail.com
Reply
Jeff April 24th, 2009

Doesn’t work in IE7, IE6, FF3….Good luck. Back to Google. Thanks for the effort though.
Reply
Kurt May 11th, 2009

Try harder Jeff. For it to work In IE, the Javascript should be in the body

<script src=”http://www.domain.com/peel.js” type=”text/javascript”>
Reply
Dennison Uy May 11th, 2009

I found a CSS / JQuery implementation of this effect on http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css

Might be worth a look.
Reply
Zarko May 12th, 2009

Guys I have an issue with this script.

Everything is working nice in Firefox and IE6 and in Firefox page peel is rolling ok but in IE6 is rolling under my flash banner… Anyone can help me?

I have putted the come wmode=”transparent” or wmode=”opaque” but still not working.

Thanks
Reply
Erez May 13th, 2009

HI all,

It didn’t work for me at all till I removed the … tags from the Javascript and of course put it after the to work in IE.

Also if you want it to work on an ecommerce site with SSL pages just change all the HTTP to HTTPS everywhere including every http you can find in peel.js (not just the images and flash links)

enjoy!
Reply
Erez May 13th, 2009

“…” tags
Reply
Erez May 13th, 2009

sorry for that it does not show up for some reason – I meant the strong and /strong tags
Reply
moralde May 15th, 2009

hi, is there an english version of the page where the plugin is located?
Reply
Crazy Sam May 28th, 2009

Thanks a lot for this. It is working perfectly well on my site. Tested on FF, Chrome and IE6. Dunno about IE 7 & 8.

About the peel rolling under flash,

add the following parameter to the OBJECT tag:

AND

add the following parameter to the EMBED tag:
wmode=”transparent”
Reply
Crazy Sam May 28th, 2009

Oh, the html codes didn’t show up.

About the peel rolling under flash,

add the following parameter to the OBJECT tag:
less than symbol param name=”wmode” value=”transparent” greater than symbol

AND

add the following parameter to the EMBED tag:
wmode=”transparent”
Reply
laura June 18th, 2009

Did you ever hear back on this q?
Reply
IzhamZakaria July 5th, 2009

hye..

im newbie. I was try that trick but it didn’t work…

Some one can help me please…..

my email.

admin@izhamzakaria.com
Reply
Jorge July 10th, 2009

Great script but I want to open the link in the same window.

What should I change for this?
Reply
Kurt July 24th, 2009

Anyone know how to get it to work with Safari 4. The transparncy dosent work, Just get a big pink box.
Reply
Newbie July 30th, 2009

Wonderful article, very useful indeed. Keep up the good work…
Reply
franc3s July 31st, 2009

Even if I put the code after the I can’t get it work on IE (all version)

Anybody can help me?
Reply
franc3s July 31st, 2009

Sorry, IT WORKS
thanx
Reply
frankie August 5th, 2009

http://www.voguereplicawatch.com it works ……….thank you
Reply
Nick August 12th, 2009

It works perfectly, tnx!!!!
Reply
sweta September 2nd, 2009

Im having the same problem , peel showing underneath the flash..the changes which u asked in code..im not able to grab..can u just forward to me updated code..so that peel comes above the flash content..It will be great help..thanks
Reply
geoff September 2nd, 2009

i can’t seem to make this work in Firefox. in all the pages i see with it working in firefox, using the web developer add on, and looking at div order, I can see that the full size 650 box div doesnt come up until i scroll over the peel tab in the top right.

On my version, at http://www.heatlaminators.com, my div order information shows that the 650 div is always on, and it covers up my clickable links, rendering them unclickable. i thought i copied everything over exactly, and can’t seem to figure out why mine is different. also, i cant get it to do an actual peel unless i copy the script in twice, with the script in once, it just does the little animation in the corner and does not react when i hover on it.

it works fine in IE6 and 7 but i cant use this if i cant make firefox only register the big div when i hover on the small one =(

any ideas? i would really appreciate any help
Reply
Reminis September 9th, 2009

Hi…

Excellent script thanks,
However…
I am interested in the following unanswered question which has been asked time and time again with no replys:-

How to make it open in the same window?

Also…

Can I make it play a sound file when activated?

And…

Where is the original FLA file so as the sizes can be altered?

Many Thanks
Reply
TwitAhead September 20th, 2009

Great idea… I can compile this stuff and make it as a full pledge peelaway script.. :)
Reply
Julie Stoddard September 21st, 2009

I’ve used the plugin for the peel away ads with success. You can view it on my blog.
Reply
Rishi Srivastava September 25th, 2009

I have also tested it on Firefox 3.0 and IE 8.0 everytime I made any change and I cleared cache/cookies everytime.
Reply
Rishi Srivastava September 25th, 2009

Please help!!!!
Reply
FriendZetta September 29th, 2009

please help me, how i can put that in blogs, exactly in blogger.. please….
Reply
www.janime.tv September 30th, 2009

can we use this on html… i mean… non-blogs
Reply
Gary October 23rd, 2009

AUTHOR IS A THIEF!!!

Original Files at:
http://www.marcofolio.net/webdesign/create_a_peeling_corner_on_your_website.html
Reply
Accounting Teacher October 30th, 2009

Is not there any plugin for this. I don’t want to play with the code of my blog.
Reply
herbert November 9th, 2009

Awesome tutorials and output. Thanks for sharing
Cheers !!
Reply
BaCo November 20th, 2009

WOW! Thank you!
Reply
BaCo November 20th, 2009

WOW! Thank you! I searched it for a long time.
Reply