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:
- 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’);
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 |
 |
Comments
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
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
March 24th, 2008 at 7:06 pm
Anyway, that’s nice to see u code it urself.
comment
March 24th, 2008 at 10:16 pm
Is there any way of getting it to open in the same window?
comment
March 25th, 2008 at 12:26 am
Is anyone else experiencing this not showing up in IE?
comment
March 25th, 2008 at 12:15 pm
Wonderful! It certainly caught my attention and I like the peeling effect..
comment
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
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
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
March 27th, 2008 at 10:35 pm
Awesome- thanks, Jordan! Hongkiat- this thing is great!
comment
March 28th, 2008 at 4:15 am
Great…..I will use it on my next project. Thanks, John
comment
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
» 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
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
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
» 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
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
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
April 7th, 2008 at 4:49 am
no funciona, segui los pasos tal cual lo indican pero no agrega el efecto….
comment
April 8th, 2008 at 1:50 pm
wow, looks elegant :)
Thanks, im sure this will come in handy one day
comment
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
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
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
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
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
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
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
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
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
April 22nd, 2008 at 3:15 am
Step 1 - Download required files<– i got error, can you upload at rapidshare?
comment
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
April 22nd, 2008 at 1:11 pm
bro thanks for the Alternative link.. and thanks for the tutorial :)
comment
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
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
April 28th, 2008 at 8:47 pm
Ooops, you are right, it works when the js tag is placed after the body tag…
comment
April 29th, 2008 at 4:45 am
I haven’t tried it yet but will this script work on a wordpress website?
comment
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
May 7th, 2008 at 10:39 am
Just awesome! Thanks very much!!
comment
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
May 13th, 2008 at 11:35 am
the peel freezes in IE7
comment
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