visitor stats

Create A Peel Away Effect On Website [How To]

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.

Step 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.

Step 2 - Edit peel.js

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

  1. jaaspeel.ad_url - URL you intend to point to.
  2. jaaspeel.small_path - Path to small.swf
  3. jaaspeel.small_image - Path to small.jpg
  4. jaaspeel.big_path - Path to large.swf
  5. 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.

  1. jaaspeel.ad_url = escape(’http://www.google.com’);
  2. jaaspeel.small_path = ‘http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/small.swf’;
  3. jaaspeel.small_image = escape(’http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/small.jpg’);
  4. jaaspeel.big_path = ‘http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/large.swf’;
  5. jaaspeel.big_image = escape(’http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/large.jpg’);

Step 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 untouch.

Step 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.

Step 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.

Posted by hongkiat in Web Tricks, at 03.24.08

Tags: , ,

Related Contents

Sponsors

Comments

  1. Mohd Ismail

    March 24th, 2008 at 2:34 pm

    or, if you are using Wordpress, you can download the plugin for peel ads at Peel Away Wordpress Plugin =)

    comment

  2. hongkiat

    March 24th, 2008 at 3:49 pm

    Mohd Ismail: Thanks, I’ve just realized after having this entry live. Appreciate the heads up though.

    comment

  3. Tech Blog

    March 24th, 2008 at 7:06 pm

    Anyway, that’s nice to see u code it urself.

    comment

  4. Chris

    March 24th, 2008 at 10:16 pm

    Is there any way of getting it to open in the same window?

    comment

  5. Joe

    March 25th, 2008 at 12:26 am

    Is anyone else experiencing this not showing up in IE?

    comment

  6. Yan

    March 25th, 2008 at 12:15 pm

    Wonderful! It certainly caught my attention and I like the peeling effect..

    comment

  7. Courtney Miles

    March 27th, 2008 at 7:39 am

    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.

    comment

  8. Jordan

    March 27th, 2008 at 3:18 pm

    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!

    comment

  9. Jordan

    March 27th, 2008 at 3:18 pm

    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!

    comment

  10. Joe

    March 27th, 2008 at 10:35 pm

    Awesome- thanks, Jordan! Hongkiat- this thing is great!

    comment

  11. WhizKidz

    March 28th, 2008 at 4:15 am

    Great…..I will use it on my next project. Thanks, John

    comment

  12. diarioTHC | How To Page Peel Effect

    March 29th, 2008 at 5:33 am

    [...] Create A Peel Away Effect On Website [How To] Pageear - free peel away ad Free page peel script [...]

    comment

  13. » Create A Peel Away Effect On Website Webcreatives

    March 30th, 2008 at 7:25 pm

    [...] Create A Peel Away Effect On Website Related StuffFlowPlayer Open Source Flash Video Player for Webthmbnl: utility for showing thumbnail-style images of pages linked from your websitejQZoom - jquery pluginCreate Soft Edges for Images Using Css and JavaScriptDeziner Folio» Blog Archive » 20 Free Tutorials to Create Your Own Flash Game [...]

    comment

  14. How To Page Peel Effect - Agregar efectos creativos a las esquinas de tu web « Xyberneticos

    March 30th, 2008 at 9:52 pm

    [...] How To Page Peel Effect, es un agradable efecto que solemos ver en mas de una Web. El mismo consiste en un efecto que se produce al pasar nuestro ratón sobre la esquina superior de nuestra web, algo similar al doblar una hoja de papel, y en el cual podremos agregar información extra o publicidad creativa. How To Page Peel Effect se logra a partir de javascript + imágenes + .sfw (flash). Por lo general estos script suelen ser de pago, es mas, en una oportunidad los necesite y debo admitir que en su momento no encontré ninguno gratuito en la red. Por suerte hoy, podremos encontrar en hongkiat este script totalmente gratuito, y a ellos le sumaremos otras alternativas que acabo de ver en Diariothc. [...]

    comment

  15. links for 2008-03-30 « D e j a m e S e r

    March 30th, 2008 at 11:32 pm

    [...] Create A Peel Away Effect On Website [How To] (tags: javascript) [...]

    comment

  16. » Peel Away Effect op je website

    April 1st, 2008 at 12:50 am

    [...] op je website. Ga hier naar toe voor een realtime voorbeeld in "the top right corner". Ga hier naar toe om de bestanden te downloaden en voor een HOW [...]

    comment

  17. Vreţi reclame după colţ? | CNET.ro

    April 1st, 2008 at 1:25 am

    [...] ar fi utilizarea, pe Hongkiat.com găsiţi un material util. Aveţi acolo o arhivă cu toate cele necesare, însemnând în principiu [...]

    comment

  18. How To Page Peel Effect » Ricotero's Blog

    April 3rd, 2008 at 6:43 am

    [...] Create A Peel Away Effect On Website [How To] [...]

    comment

  19. RLV

    April 7th, 2008 at 4:49 am

    no funciona, segui los pasos tal cual lo indican pero no agrega el efecto….

    comment

  20. fedmich

    April 8th, 2008 at 1:50 pm

    wow, looks elegant :)
    Thanks, im sure this will come in handy one day

    comment

  21. rex

    April 9th, 2008 at 9:40 pm

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

    automatically scrolling recent or random posts.

    comment

  22. LcDude

    April 11th, 2008 at 6:27 pm

    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.

    comment

  23. EFEITO DE PÁGINA DOBRANDO COMO PAPEL « Vítor Imenes

    April 12th, 2008 at 8:45 am

    [...] Por muito tempo um tipo de script semelhante a este estava sendo vendido mas já existe uma opção gratuita. Tudo que você precisa para aplicar este tipo de efeito pode ser encontrado Efeito de papel dobrando [...]

    comment

  24. popljubo

    April 14th, 2008 at 4:41 pm

    Great thing Hongkiat! Thank you for sharing.
    Please [somebody] help me with code/expression to open the link in same window/tab

    comment

  25. stanotmano

    April 16th, 2008 at 12:21 am

    What script are you placing after the body tag for IE? I can’t get this to work

    comment

  26. stanotmano

    April 16th, 2008 at 6:26 am

    finally got it to work, now working on my flash object not covering up art of it . Any suggestions.

    comment

  27. popljubo

    April 17th, 2008 at 7:38 am

    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

    comment

  28. Criação de Sites - Desenvolvimento de Sites » Blog Archive » Efeito de página dobrada

    April 18th, 2008 at 6:31 am

    [...] Por muito tempo um tipo de script semelhante a este estava sendo vendido mas já existe uma opção gratuita. Tudo que você precisa para aplicar este tipo de efeito pode ser encontrado Efeito de papel dobrando [...]

    comment

  29. Hendra

    April 18th, 2008 at 2:57 pm

    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?

    comment

  30. jemmBOo

    April 22nd, 2008 at 3:15 am

    Step 1 - Download required files<– i got error, can you upload at rapidshare?

    comment

  31. hongkiat

    April 22nd, 2008 at 10:16 am

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

    comment

  32. jemmBOo

    April 22nd, 2008 at 1:11 pm

    bro thanks for the Alternative link.. and thanks for the tutorial :)

    comment

  33. MMR

    April 23rd, 2008 at 11:40 am

    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

    comment

  34. Bettina

    April 28th, 2008 at 8:25 pm

    The effect isn’t showing up in IE 6.0. Did you find a way to solve that problem?

    comment

  35. Bettina

    April 28th, 2008 at 8:47 pm

    Ooops, you are right, it works when the js tag is placed after the body tag…

    comment

  36. Mike

    April 29th, 2008 at 4:45 am

    I haven’t tried it yet but will this script work on a wordpress website?

    comment

  37. mor10

    May 5th, 2008 at 3:36 am

    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

    comment

  38. Seth

    May 7th, 2008 at 10:39 am

    Just awesome! Thanks very much!!

    comment

  39. GWG Community Blog » Tutorial: Peel Away Ads

    May 11th, 2008 at 6:39 pm

    [...] On our main site, we used a Peel-away script which is really cool.  Now you can get it too. Learn how. [...]

    comment

  40. loro

    May 13th, 2008 at 11:35 am

    the peel freezes in IE7

    comment

  41. Prasanna

    May 15th, 2008 at 7:43 pm

    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

    comment


Leave a reply