Simple Page Peel Effect with jQuery & CSS

Blog » CSS/XHTML » Simple Page Peel Effect with jQuery & CSS

Simple Page Peel Effect with jQuery & CSS

May 10th, 2009

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.

View Demo

1. HTML – Page Peel Wireframe

The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg_block” wrapped in an <a> tag. Note – If you don’t have any conflicting absolute/relative positioning properties, you technically don’t need the “pageflip” container at all.

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

2. CSS – Page Peel Styles

Set the image property to a smaller size (50px by 50px) by default and set the absolute positioning to be in the top right corner. The image will be used similar to the “masking” technique in Photoshop or Flash, where it will be placed on top of the hidden message, so only a portion of the message will be shown. Check out the image below for a visual:

Page Peel Effect with jQuery and CSS

The actual message behind the “peeling” effect, is all within the “msg_block” class. By default, it will start at 50px by 50px, positioned on the top right corner of the page. The text-indent will shoot the text off of the page for anyone with CSS enabled.

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

Note that the “msg_block” height is off by 2px compared to the image property – this is taking in consideration of the drop shadow that the image has.

3. jQuery – Animating Page Peel

All we are doing here is expanding the image and msg_block on hover, then retracting to its default size on hover out.

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ //Animate and expand the image and the msg_block (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //On hover out, go back to original size 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //On hover out, go back to original size 50x50
		.animate({
			width: '50px',
			height: '50px'
		}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});

Conclusion

The concept is very simple and may come in handy one day. If you have any questions or know of other techniques, please don’t hesitate to let me know~

View Demo

202 Responses to “Simple Page Peel Effect with jQuery & CSS”

May 10th, 2009 @ 11:08 pm MAX

Absolutely Amazing! I thought that without flash it is impossible! But I was wrong
May 10th, 2009 @ 11:23 pm saurabh shah

amazing work …
May 10th, 2009 @ 11:35 pm Michel Morelli

Great tutorial. Tnx. Can I translate it in italian language? M.
May 11th, 2009 @ 12:46 am Greg McAusland

great effect without flash, really good job
May 11th, 2009 @ 1:24 am Sérgio Soares

beautiful, u rock SOHTANAKA
May 11th, 2009 @ 2:00 am Forgetme

Thanks for sharing. It is better than flash version. It works well in IE6, IE7 and Firefox 3.0.4 for me. I will use this feature in future.
May 11th, 2009 @ 3:58 am TiagoOs

Very Cool !! and Cross!! great effect!

gratters
bye!
May 11th, 2009 @ 4:11 am Dennison Uy

Very cool idea. Tested working in IE 6-8 and Opera as well. Kudos!
May 11th, 2009 @ 4:14 am Aslam A Memon

kool stuff, keep up the gr8 work

–
http://www.aslammemon.com/blog.html
May 11th, 2009 @ 4:17 am John

It’s always nice to have other fish in the sea. (It’s kinda lonely out here) Just to keep the options out there though, a non-flash based plugin was already developed for this: http://www.elliottkember.com/sexy_curls.html
I also developed a plugin that can be Flash or not at http://www.smple.com/pagePeel/ although I need to revisit some of the methods used once I have more time on my hands.

Great tut though!
May 11th, 2009 @ 5:00 am Neal G

That’s pretty cool! I’m having one of those ‘why didn’t I think of that myself’ moments right now.
May 11th, 2009 @ 9:24 am glnster

Huge Thank you for making an outstanding non-Flash method!
May 11th, 2009 @ 9:27 am Erica McGillivray

Really cool effect that I’m already conjuring up uses for.
May 11th, 2009 @ 12:29 pm Juan Cherry

I love the simplicity of the method. Thanks for the excellent post!
May 11th, 2009 @ 12:57 pm mrLami

Awesome stuff guy!
May 11th, 2009 @ 5:02 pm Rafael R.P (Raff)

Great Tutorial!

Thx soh!
May 12th, 2009 @ 3:20 am alian

Very nice “non-flash” tutorial, than you
May 12th, 2009 @ 4:19 am Gilbert

Nice tut. I was actually thinking about trying something like this the other day. Never realised how simple it could be. Thanks.
May 12th, 2009 @ 8:25 am tomato

EXCELENT !! thanks
May 12th, 2009 @ 9:46 am zaan

awesome tutorial.thanks..
May 12th, 2009 @ 11:00 am Miguel

Great work! I have no words! Thanks for it.
May 12th, 2009 @ 11:06 am dandyyoh

Really great. kudos
May 12th, 2009 @ 6:58 pm conray

Excellente!!!
May 12th, 2009 @ 7:29 pm Adrian.Coria

perfect, really perfect…
May 12th, 2009 @ 8:22 pm Ariyo

I Love it. Thanks for sharing it with us. YOU ROCK!
May 13th, 2009 @ 3:24 am Derrick

Lovely….Just lovely.

Thanks

MD
May 13th, 2009 @ 5:23 am Cristian Eslava

Just amazing. I do not like very much this paper effect because it´s very common and pretencious, nevertheless I think you made a great of it. If I´d use it I´d use your way.

Congrats
May 13th, 2009 @ 10:22 am aymen

it’s a great effect
thanks
May 13th, 2009 @ 10:29 am MorayWeb

Fantastic! I’ll be using this for sure. Bookmarked on delicious….
May 13th, 2009 @ 4:21 pm Sonny

Very elegant solution. Your site is very elegant also.
Thanks for sharing.
May 13th, 2009 @ 4:42 pm Şukufe

no follow=)
May 13th, 2009 @ 10:06 pm photoshop image masking

This is absolutely fabulous!!!!
May 14th, 2009 @ 1:39 am Mahbub

JQuery jFlip is a similar plugin for photos that I yesterday blogged about in http://www.jquerymagic.com/2009/05/page-flip-with-jquery-jflip-plugin-of-the-week-may-12/. This one is nice as well.
May 14th, 2009 @ 2:10 am flying

I like
May 14th, 2009 @ 2:22 am Jon

That’s brilliant!
May 14th, 2009 @ 3:48 am art2code

nice effect! thx
May 14th, 2009 @ 6:29 am Mae

I just wanted to say thanks for your entire site. I’ve learned a lot! (and on a side note, I love your color scheme for this layout)
May 14th, 2009 @ 7:10 am Kawsar Ali

Very nice Soh, Its a really cool effect and allows for functionality.
May 14th, 2009 @ 7:15 am mark@free wii

Awesome! A simple solution to a problem I thought could only be done in flash too.
May 14th, 2009 @ 7:32 am sivas

very good, thank you
May 14th, 2009 @ 8:01 am Hutek

Exellent job, thanks
May 14th, 2009 @ 9:32 am Logo Bang

That was an awesome tutorial. Thanks for the inspiration and the idea.
May 15th, 2009 @ 3:22 am Neka

Good tutorial
May 15th, 2009 @ 6:30 am Baris

wonderfull, very good.
May 15th, 2009 @ 7:04 am AndiOnline

Thank you very much!

I used it for the webpage http://www.gasthof-steinerwirt.at – together with prototype.js and scriptaculous, so I had to change your code like this:

Subscribe via RSS

and js:

var isBig=false; var scaleFactor=4; Event.observe(window,'load',function() {
Event.observe('pageflip','mouseover',function(event) { if(!isBig) { new Effect.Scale($('pageflip_img'), 100*scaleFactor, {scaleFromCenter:false,scaleMode: { originalHeight: 52, originalWidth: 50 },scaleContent:false, duration:0.5,delay:0.1}); new Effect.Scale($('pageflip_msg_block'), 100*scaleFactor, {scaleFromCenter:false,scaleMode: { originalHeight: 50, originalWidth: 50 },scaleContent:false,duration:0.5,delay:0.1}); isBig=true; } }); Event.observe('pageflip','mouseout',function(event) { if(isBig) { new Effect.Scale($('pageflip_msg_block'), 100/scaleFactor, {scaleFromCenter:false,duration:0.5,delay:0.1}); new Effect.Scale($('pageflip_img'), 100/scaleFactor, {scaleFromCenter:false,duration:0.5,delay:0.1}); isBig=false; } });
});
May 15th, 2009 @ 7:04 am AndiOnline

sorry..webpage is http://www.falschparken.at/gasthof-steinerwirt
May 15th, 2009 @ 9:47 pm Newbie

I am having problem making this code work.

It keeps showing up on the website has text when i test it out.

I am using dreamweaver to design the website.

Please let me know if i am missing a coding that a more experience person would know to make this work..

Thank you in advance!
May 15th, 2009 @ 10:10 pm Newbie

Ok so i figured how to resolve the coding showing up on the screen but now i have no idea how to get the peel to work.

please help
May 16th, 2009 @ 11:48 am Reino

Rocks!
May 16th, 2009 @ 12:00 pm Ali

thank you for sharing…
May 16th, 2009 @ 4:06 pm bl@nkster

nice effect, i like it
May 16th, 2009 @ 5:48 pm Joel

Perfect, thanks for sharing
May 17th, 2009 @ 8:33 am A

No words to describe. Wonderful.
May 18th, 2009 @ 3:48 am Akif

Nice work. Thanks for sharing!
May 18th, 2009 @ 9:02 am ncj

This is very nice, however, I don’t believe its key accessible. Someone using a screen reader would miss this totally.
May 18th, 2009 @ 9:05 am joyologo design shop 2.0

Very Cool thanks for tut..
May 18th, 2009 @ 11:14 am Soh

@all, thanks for the feedback, suggestions, and helpful links!

@ncj, to degrade nicely for a text reader, all you would have to do is add some text in between <div class="msg_block"></div>
May 19th, 2009 @ 5:52 am chris

Hello Guys

This tuto is fab !!

But I have an issue with IE someone can check the website http://www.getfitlondon.com

Work fine with FF

Cheers
May 19th, 2009 @ 9:33 pm Grégoire Noyelle

Thanks a lot to share this tuto with us !
May 20th, 2009 @ 6:44 am Soh

Hey Chris, can you describe your issue?
May 20th, 2009 @ 7:25 am chris

The script work amazingly fine but on IE i got a grey mask on the subscribe picture.
I edited the picts on fireworks then change the canvas color background but didn t work if you go on my website with IE you will see the issue

Thanks so much for your help
May 20th, 2009 @ 7:53 am Soh

Oh ok, that is due to IE6 not being able to handle PNG files.

Check out this tutorial on how to get it to work on IE6: http://www.sohtanaka.com/web-design/png-transparency-in-ie6/
May 20th, 2009 @ 9:40 am Mjf

Question, is there a way to make it so we can force the page peel to stay in the top right corner no matter if the browser is resized or not? I am not sure if anyone has asked this or not yet, but it is sort of an eye sore when someone resizes or minimized the window so there is a scroll bar the image moves over and then when scrolling doesn’t move back to the corner. This happens in ie7 and Firefox. I am sure there is a way to do it, but I don’t know how.

Thanks,

Matt
May 20th, 2009 @ 10:26 am Soh

Hey Mjf, I was trying to see that issue, but perhaps I didn’t clearly understand your explanation, can you rephrase your scenario and issue?
May 20th, 2009 @ 10:37 am mjf

Sure Soh.

By the way I forgot to mention this is an awesome tutorial. Thanks so much.

If you open the pixel design demo for the page peel effect and resize the browser window or viewport so it is small enough for a horizontal scroll bar to appear you will notice a couple things about the page peel.

When you make the browser window smaller the page peel will stay in the corner as it should, but when you scroll to the right to see the rest of the “website” or in the demo case the background image of the sofa you will notice the page peel effect stays put thus putting it in the center of the screen or covering part of the background.

It is a really small issue and not even really a bug, but if you were implementing this on a site like yours with the navigational bar in the top right and someone made the browser window smaller and then wanted to scroll to your navigational menu the page peel effect could be covering a portion of the menu bar.

It would be nice if even when scrolling the page peel effect stayed in the top right hand corner no matter the size of the browser window.
May 20th, 2009 @ 11:00 am Soh

Thanks for the break down, I see what your seeing now

That is actually a problem with the entire layout, not this page peel specifically.

You can correct that simply by adding a min-width of your body tag. If you notice, that same bug was affecting the entire layout, not just the page peel~

body {
min-width: 920px; /*–or whatever size you want it to be–*/
}

Let me know if you have any questions

Thanks!
May 20th, 2009 @ 2:55 pm Enrique

Gracias por compartir…excelente trabajooo!
Thanks for sharing this great work!
May 21st, 2009 @ 2:45 am Arif

Nice job THanks..
May 21st, 2009 @ 6:32 am chris

Thanks soh it worked !!

Thanks so much l ami
May 22nd, 2009 @ 12:11 am Bobz

This is nice, but this can’t be delivered trough Ad Serving system.
So this would be useful if you put this only on your site trough CMS.
May 22nd, 2009 @ 9:29 pm GeLZa

nice…..
May 23rd, 2009 @ 1:38 pm Giacomo Ratta [ITA]

Great idea! Simple code for a professional work.

Thank you
May 24th, 2009 @ 12:45 am darwin

thanks for this great tutorial
May 24th, 2009 @ 12:21 pm Armando

How can I do this using Tables? Or It is neccesary with Position tags?
That´s because I prefer Table>Tr>Td method.
May 25th, 2009 @ 11:21 am Soh

Armando, Although I don’t recommend it, yea you should have no problem using a table. Just make sure you adjust the css accordingly to hit the right elements.
May 26th, 2009 @ 4:14 am Stanley @ SEOAdsenseThemes

Soh, this is very nice and slick jQuery script. Cool effect.
May 26th, 2009 @ 10:39 am Moschos

Congratulations! The most amazing CSS code I’ve ever come up to !!! Keep up this excellent work!! I give you 20 / 10
May 26th, 2009 @ 4:15 pm Anthony Alexander

Wow, page curls are really the shiznit.

Here’s a demo using Very Versatile Electronic Document V.V.E.D. 1.0

http://novatvmedia.com/vvcurl
May 27th, 2009 @ 5:50 pm zhangjinlon

wow!!!non-flash,rather cool~thanks
May 27th, 2009 @ 7:01 pm zhangjinlong

I like jQuery,jQuery is amazed.
May 28th, 2009 @ 9:04 pm Heri NXI

nice and simple,
I need to learn more about jQuery….
May 29th, 2009 @ 1:05 am Iresh Dilan

I was finding a tutorial to do this effect. This is the best because no Flash.
May 31st, 2009 @ 2:57 am goemo

Hi,

first of all: Great tutorial and a big “Thank you” for sharing

My Question: Is it possible to have more than one peel on the same html-site? Thanks for you answer!!!
May 31st, 2009 @ 5:06 pm Rajat chodhary

oh my gosh! i never thought that before. Really! cool piece of work man.
Great thanks to sharing this tip.
Well -n- Done
Jun 2nd, 2009 @ 12:29 am moralde

Couldn’t aesthetically beat flash versions, but looks cool and very safe for people like me who doesn’t have a clue about flash.
Jun 2nd, 2009 @ 3:34 pm zac

Wow.. your work is really beautiful and your tutorials top notch. I am really glad I found this site. Thanks for your excellent work !!
Jun 3rd, 2009 @ 12:21 am yanzi

I still don’t know how to make it work like your demo.why?
Jun 3rd, 2009 @ 1:04 am yanzi

Now I know how to use it.it’s so nice.Thanks.
Jun 3rd, 2009 @ 1:18 am Sena kendali

Damn,,,it’s totaly cool bro…
Jun 3rd, 2009 @ 12:18 pm Gastón Rojas

Cool!
nice and simple-
Thanks!
Jun 5th, 2009 @ 10:53 am benson

nice effect…fantastic technique
wer could i download it
Jun 13th, 2009 @ 12:42 am InternetFluent

Nice and simple ! Why didn’t I think of it …. animate ?
@benson – dude the code is on this page! What do you want to download? Use copy – paste or is that to hard ?
Jun 17th, 2009 @ 11:34 pm simo

great! I’ll try it soon!
Jun 18th, 2009 @ 5:49 am Jeremy Denlinger

Thanks for this awesome tutorial just put it in place here:

http://www.pequeachurch.com
Jun 19th, 2009 @ 2:53 am Jamie Giberti

This script is awesome and looks great! I was trying to adapt it into a design where underneath the folding corner you have an image that is an image map (so a set of links rather than just one link). I have managed to get this to work in all browsers, apart from IE6 (sigh). IE6 cannot handle the z-index of 99 on the folded corner image in the front. I have tried setting the z-index of said image to 0 during the hover event but this has no effect. Have yourself or anyone else tried anything like this and do you have any ideas?

Cheers

Jamie
Jun 22nd, 2009 @ 4:06 pm Gautham Sarang

I visited your demo site. The peel didn’t come out. I am using Firefox 3.0.11

Is it my browser?
Jun 23rd, 2009 @ 5:31 am silviu

hello,
first of all congrats on this effect, is really nice. works fine for me on any browser/OS, but unfortunately the exception is called IE6. the problem is that both png files load very very slow. eventually they do appear, but it takes around 6sec to do so. and this is happening on every mouseover/mouseout.
I have tested this on a mac/virtual machine with win xp and IE6, but also on a native win xp/also IE6.
anyone else had this problem?
I would include an exemple link, but unfortunately this also happens on the default demo link provided on this page by the author.

thank you,
silviu
Jun 28th, 2009 @ 9:41 pm Troy Dean

Great work. Any idea how to place the peel at the bottom left of a div and make it peel up and to the right? I cannot figure out the css for the life of me.

Cheers.
Jun 28th, 2009 @ 11:42 pm Behzad

thNx
i was looking for this
Jun 30th, 2009 @ 6:32 am Mel

Where are the files? I cannot seem to make this work… I am confused what to name the psd files? Or, screen shots? PNG???
HELP!

Also, Why doesn’t the script have the proper tags around it??? confused…
Jun 30th, 2009 @ 8:51 am spirov92

Thanks, very useful script! I am thinking of putting it into a plugin.
Jun 30th, 2009 @ 11:50 pm ivan

It’s so great. I want to use it. Thank you for the cool idea.
Jul 2nd, 2009 @ 8:13 pm marko272

how come the background image is transparent????? its supposed to cover whats on the page and not let it show through????? i even tried it with a .jpg background image and its still transparent!!
Jul 3rd, 2009 @ 11:03 pm Ardhiansyam

awesome…thank alot, it work at my blog
Jul 7th, 2009 @ 7:07 pm Avery

It is okay for my blog,thanks.
Jul 8th, 2009 @ 9:34 am yayo

good job !!!
Jul 8th, 2009 @ 3:42 pm Robert

I really appreciate you posting your code for the pageflip feature. I cannot seem to get it working though. It’s showing up in the right place. As far as I can tell, all the code is correct, but it does not flip.

The website is as http://www.cloverroad.ca and you can see it there. I’ll keep it up until you get back to me. I’m not sure if it’s the javascript or the CSS. You can see the css at this URL at the very bottom of the page…
http://www.cloverroad.ca/wp-content/themes/CloverRoad-theme-3/style.css
Jul 9th, 2009 @ 6:31 am Leon Dudovich

Is that possible to use this code when you create website on one of websiting builder like http://www.site2you.com/ ?
Jul 9th, 2009 @ 5:31 pm mapb_1990

did’t work on my site

http://www.anime-land.org/index.php
Jul 10th, 2009 @ 9:29 am Robert

mapb_1990 – your bug seems to be the same as mine.
Jul 10th, 2009 @ 11:57 pm Luis

Excellent! … thanks for share this
Jul 12th, 2009 @ 2:01 pm lisa

Great script! Got it to work correctly until I make my window smaller and then the page peel animates but below my navigation. I think it’s a z-index prob? Any ideas? I’d love to be able to implement this on the live site!! http://www.champsinternational.org/sponsors.html
Thanks in advance for any help,
-lisa
Jul 16th, 2009 @ 2:04 pm Hjorth

Ok so i got it to run and it looks great.
But I am not very good with java and want it to work in two places at the same time.

If I want to have 2 page peel effects on the side how would I write that?
When I connect it to both they move ofc at the same time

I know I can copy the text and rewrite it so it fits the new names, but I was hoping I could reuse the code that was allready there.

Hope you understand what I mean
Jul 17th, 2009 @ 4:30 am güvercin

it’s wonderfull example
Jul 20th, 2009 @ 9:12 am Swagat Sharma

Hey SOh,
I wantu apply it on my blogger template, I included the skin, but i have problem handling javascript, i saved it as .js and uploaded on mediafire.. can any1 explain how it works? i know t sounds so lame but..
Jul 20th, 2009 @ 2:14 pm Adrian

woow ..really good job.thanks
Jul 20th, 2009 @ 10:43 pm Manmohan

Good work
Jul 22nd, 2009 @ 1:56 am hadi

If anyone work and run this and run successfully then Give me. I cannt figure that out.
Jul 22nd, 2009 @ 7:44 am Soh

For those having trouble getting this to work on your site, please refer to the jquery tutorial page for instructions on getting jquery to work: http://docs.jquery.com/Tutorials:How_jQuery_Works most likely the jquery file/script is not being called properly~

@Hjorth if you want to have two of them just make sure the elements you are targeting in your events have something like: $(this).find(”img”) instead of just $(”#pageflip img”)

@lisa I was not able to make your page break where the peel goes underneath the nav?
Jul 26th, 2009 @ 12:58 pm Hahnefeld

I’m using jQuery for our website. I will use your libary to get more interaction in our page. With jQuery we also use idTabs. Great work!
Jul 26th, 2009 @ 1:57 pm Anders

This is absolutely stunning! Thanks for this plugin, I simply love it! However, I have a little issue with it. On the site I’ve just integrated it on, I have sort of JavaScript showreel for some pictures running. When I hold the mouse over the peel effect, and it’s expands – the JavaScript showreel is alway on the top of the content behind the peel effect.

Please check the website : http://www.nit-hockey.no.
If your screen solution is so big that the peel effect doesn’t go over the “main” rotating image, please just make the browser window smaller, and you’ll see what I’m trying to explain here.

Is there any way to fix this? It’s really bothering me

Thanks again for the plugin, and thanks for any help I can get !
Jul 28th, 2009 @ 9:42 pm Andrew

In reply to Anders. Looks nice I see the problem your having.
With CSS you should control whats called the Z-index
which places items on top or below other items
the higher the number the higher the spot.
here is tutorial on zindex
http://www.w3schools.com/Css/pr_pos_z-index.asp
Jul 30th, 2009 @ 2:07 am Anders

Oh yes! That was the thing. In the CSS provided from this tutorial it was only the page flip that had z-index on it – not the picutre under the page flip. Thank you so much, Andrew!

Maybe an idea to set zindex on the ad under the page flip for this tutorial, Soh?
Jul 30th, 2009 @ 11:22 am Soh

Hey Anders, sorry for not getting to your question soon enough~

@Andrew, thanks very much for helping Anders out

*The tut has now been updated~
Aug 2nd, 2009 @ 6:20 am erhan

Güzel Ama Ben Çözemedim…!!!!!!!!
Aug 3rd, 2009 @ 5:04 am CSSJockey

Amazing Stuff!! Keep it coming.
Aug 3rd, 2009 @ 8:26 am Helen

Would be easier to understand, if you just display the single images.
Aug 3rd, 2009 @ 6:55 pm Bill Gates

Soh,

Great fucking tutorial!!

You have not only inspired many others but also express’d your tutorial with a pro-style attitude.

Great job and keep up the good fucking work!!
Aug 4th, 2009 @ 12:16 am Xtence

Great, great ! Good work man, and thanks for sharing, this is awesome !
Aug 4th, 2009 @ 7:03 am Bradford Sherrill

Great post! You can also do this with a flash version, but why?
Aug 4th, 2009 @ 6:36 pm dapas

Perfect, without flash.. :-bd
Aug 5th, 2009 @ 12:32 pm Andreas

Searched for that – found it at smashignmagazing – great stuff!
Andreas
Aug 6th, 2009 @ 10:11 am BN Wiersma

Hi, great stuff. Just can’t get it to work.

I downloaded jquery from the official website and uploaded it in the right folder (http://www.slimshirts.nl/jscripts/jquery/jquery.js). I created a new css file (”peeleffect.css”) and uploaded it. Finally I added the following in the of my page:

$(”#pageflip”).hover(function() { //On hover…
$(”#pageflip img, .msg_block”).stop()
.animate({ //Animate and expand the image and the msg_block (Width + height)
width: ‘307px’,
height: ‘319px’
}, 500);
} , function() {
$(”#pageflip img”).stop() //On hover out, go back to original size 50×52
.animate({
width: ‘50px’,
height: ‘52px’
}, 220);
$(”.msg_block”).stop() //On hover out, go back to original size 50×50
.animate({
width: ‘50px’,
height: ‘50px’
}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});

WHY WON’T THIS WORK? Anyone?
Aug 6th, 2009 @ 10:33 am Soh

@BN Wiersma and for anyone who is having issues with getting started,
please refer to this tut http://docs.jquery.com/Tutorials:How_jQuery_Works
Aug 6th, 2009 @ 10:51 am BN Wiersma

@Soh:
Yeah, thanks for the fast response but I already read it…. ;((
Aug 6th, 2009 @ 12:49 pm Soh

@BN, did you read the part about:

$(document).ready(function(){
// Your code here
});

Because it seems you don’t have that on your site
Aug 7th, 2009 @ 3:55 am BN Wiersma

@Soh:
Thanks again for the quick response AND more so for helping me out!

It works after adding the document.ready. Thanks a lot man! Keep it up!
Aug 9th, 2009 @ 10:47 pm Ajiu

can it be on the left top corner?

if response pls email me.
Aug 10th, 2009 @ 9:49 am yossarian

merci !! excellent..
Aug 10th, 2009 @ 10:49 pm gchan

Can I combine this page peel CSS & JQuery with CMS application?

Thanks
Aug 13th, 2009 @ 1:46 pm Moksha Solutions

simply amazing………without flash its really cool
Aug 14th, 2009 @ 1:56 am Ambili Kutty

Awesome! Does it work in Google Chromo and IE 6.0

Regards
Ambili
Aug 14th, 2009 @ 7:21 am Timo

Greatjob, but where do iget subscribe.png from?
Aug 14th, 2009 @ 9:10 am Smashing Themes

These web 2.0 Javascripts like jQuery and Prototype actually kicked the flash out. An awesome thing done with Javascript.

Thanks for sharing the technique with world
Aug 17th, 2009 @ 10:17 pm Andy

Thanks for sharing, thats an awesome technique!

Andy
Aug 18th, 2009 @ 11:51 am Keith Davis

Great website and well explained tutorial.

If I ever need a page peel effect… I know where to come.
Aug 19th, 2009 @ 10:15 pm Sean

If you use an image sprite of the page peel before and after, you could create a CSS class that would reveal the peel on hover, making this degrade gracefully (which I’m thinking about doing for a bug submitting report on a site I’m working on). Then, if javascript is enabled, it can change the class to something that will not trigger the css hover state.
Aug 20th, 2009 @ 12:02 am harish

hey you really rocks me man!
Aug 20th, 2009 @ 7:32 am luis santillan salinas

Great website and well explained tutorial.

If I ever need a page peel effect… I know where to come.
Aug 23rd, 2009 @ 11:19 am laurent

Bonjour,
Vraiment très beau. Mais je suis débutant et j’ai du mal à intégrer le script. J’ai juste 2 questions à vous poser :
dans quelle partie de la page html faut-il placer le code html ?
Comment présenter le script jquery (structure , mode d’execution) ?

Merci d’avance pour votre aide !
salutations à tous !
Aug 26th, 2009 @ 7:57 pm sregoryor

Is it possible to peel back and view a live website? Can a web address be used instead of the picture for the source?
Aug 28th, 2009 @ 1:41 am Christian

@Soh,
under which license do you set your example?
is it ok if I use this image: page_flip.png

greets
Christian
Aug 31st, 2009 @ 10:24 am Milaw

Some troubles on explorer 8…
Very good job!
Sep 5th, 2009 @ 1:09 am Mithilesh

Great job. its so simple to integrate i am impressed.
Sep 5th, 2009 @ 8:34 pm amine

absolutly amazing
Sep 13th, 2009 @ 4:10 am haberler

i hate from flash . Thank you very much guys for css + jquery combination.
Sep 14th, 2009 @ 12:36 am ziko

Thank you! Very good script!

Viktor from Slovakia
Sep 14th, 2009 @ 5:37 pm 4hmeT

Awesom job man , Thnk u , from Türkiye
Sep 16th, 2009 @ 1:30 am Farid Hadi

Wow, this is just wonderful. Thanks for sharing.
Sep 17th, 2009 @ 9:42 pm Santanu

Awesome man………..
Sep 20th, 2009 @ 1:57 pm Ryan Schwartz

Awesome job! This was really easy to implement and works cross-browser without a hitch. One thing, I had to change your css for the pageflip to position absolute to get it to position correctly in IE.

#pageflip {
margin: 0px;
padding: 0px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
Sep 22nd, 2009 @ 12:55 pm Alex

Great job man!
I have no knowledge in javascript and I had it to work perfect…

BUT how on earth will this script work with lightbox on the same page ??? ((

Could someone give me an answer to that?:(

Best regards!
Sep 24th, 2009 @ 1:56 am jplayer

Great website and well explained, without flash its really cool !!!
Sep 27th, 2009 @ 3:44 pm ahmed

Thank you very much!
j’ame je partage

merci bc mon ami….. o_O
Oct 10th, 2009 @ 9:15 am melissa

The script work amazingly fine but on IE i got a grey mask on the subscribe picture.

Thanks so much for your code! Keep up the good work.
Oct 22nd, 2009 @ 5:10 pm Greg

Can some one help me with instructions to use this on Ning?
Oct 25th, 2009 @ 8:16 pm Bill

Greg, I was able to get this to work on Ning. Check it out:
http://www.pagepeeler.ning.com
Oct 25th, 2009 @ 9:59 pm Luis

Great job man.
Please the code for ASP.NET.
Oct 26th, 2009 @ 3:03 pm Godster

Trying to implement this on my site, but having problems in IE7. Where the image overlaps one of my containers, it becomes transparent i.e. I can see the contents of the container through the peeled back image. Any suggestions?
Oct 29th, 2009 @ 9:54 am Austin

How do I keep from covering up input fields with the page peel?
<img src="http://i38.tinypic.com/10fyz51.jpg" border="0" />
Oct 29th, 2009 @ 9:55 am Austin

http://i38.tinypic.com/10fyz51.jpg

[IMG]http://i38.tinypic.com/10fyz51.jpg[/IMG]
Oct 29th, 2009 @ 11:01 am Soh

Hey Austin, just make sure your z-index is set higher than anything on the page so it stays on the very top layer~
Nov 2nd, 2009 @ 6:18 am Cory Mathews

javascript 1 flash 0. Glad to see a non flash way of accomplishing this. Gotta love jQuery!
Nov 9th, 2009 @ 9:18 am ahmet

wonderfull very helpful
Nov 10th, 2009 @ 9:57 pm Ray

Nice tutorial…I have put one in my blog…thanks
Nov 17th, 2009 @ 3:11 pm منتديات ماي بكتشرز

OooH Wow wonderfull very helpful
Nov 19th, 2009 @ 9:03 pm techhsot

this is very gud thx
Nov 28th, 2009 @ 12:01 am Scott

I cannot seem to get it working. I currently have lightbox on the same page and there is a clash when I add:

AND

On the same page (neither will work).

How can I get around this? Thank you
Nov 28th, 2009 @ 1:11 am sushil shirbhate

Great effect without flash, really good job
Dec 2nd, 2009 @ 12:39 am Uldis

Great work. Thanks!
Dec 2nd, 2009 @ 12:42 am Uldis

But one problem..for me plugin dosnt work with IE 7.0.5730.11
Dec 3rd, 2009 @ 3:12 am chandrashekharmurthy

its realy nice,without flash it is working,whether it s working in all browsers?
tnx
Dec 3rd, 2009 @ 5:48 am wajira

Great tip…
I m not good in coding, how can I use this on blogger(blogspot).
Thanks.
Dec 6th, 2009 @ 11:30 am Prateek Suhane

amaaaaaazing idea….
Dec 9th, 2009 @ 7:37 am Cassandra Bryan

Awesome! Thanks a bunch, I am using it for a promotion coming out soon.
Dec 13th, 2009 @ 5:24 am hosein

thanks man
Dec 16th, 2009 @ 5:59 am ilknur

thank you….very good..
Dec 22nd, 2009 @ 5:59 am Hussain Cutpiecewala

I will just say.. AWESOME, AMAZING, EXCELLENT, PERFACT
Dec 23rd, 2009 @ 7:38 am achint

Hi, Thanks for this script. I’m a FAN of JQuery. Your Blog is pretty.
Dec 24th, 2009 @ 4:16 am Burak GÜDER

Wow wonderfull,, very helpful
Dec 28th, 2009 @ 2:44 pm Anaa

Great tutorial.thanks!
Jan 5th, 2010 @ 6:44 am Gianna

I don’t comment much had to just say that I thought it was great that you were able to develop a “page peel” plugin using jQuery & CSS. Is there a way to code it to peel from the bottom? Never seen that. Was wondering why it has never been done.

Thanks for the reading. Great insite! Will check back often to see any updates.
Jan 8th, 2010 @ 6:01 am London Website Designing

Hi..
Really I was thinking that its a flash work..and I never tried it. you did really well..Again Thanks..
Jan 20th, 2010 @ 6:26 pm Matt

Wow, perfect. Exactly what I was looking for.
Jan 29th, 2010 @ 10:52 pm eSmoker

Great work.

Will try it on our site soon.

Thanks.
Jan 30th, 2010 @ 5:52 am Stephen

We will be using this effect on our website soon for free signup links, very very cool effect.
Feb 1st, 2010 @ 11:32 pm shweta gusain

hi i tried it but the mouse over effect is not working properly…can u help me out..
Feb 2nd, 2010 @ 4:03 pm nashekrashe

thnks for sharing
Feb 3rd, 2010 @ 6:30 am FALCONSEYE

Great stuff! Thanks for sharing.
Feb 4th, 2010 @ 7:17 am Abhinav

Thank you!
Feb 5th, 2010 @ 2:38 pm Aion-Top

Thank you, I will apply this website.
Feb 7th, 2010 @ 4:53 am Rave

Thank you for a long time searching for something like this!

Speak Your Mind…

Can't find what you're looking for? Don't be afraid to use the search, or simply just ask!

Blog Categories

Latest Blog Posts
CSS / XHTML / jQuery Tutorials
Everything CSS , XHTML & jQuery - Tutorials, tricks, tips and more.
Web Design Articles
All of my deep thoughts, articles, procedures, experiences, insight, and more.
Design Tutorials
Anything from design tips, Photoshop tutorials, and more.
Search Engine Optimization Tips
Search Engine Optimization tips, resources, techniques, and more
Resources & Tools
Fonts, Downloads, Tools, Plug-ins, Add-ons, and more!
Personal Interests & News
All of my personal interests and site updates. Stay up to date with whats happening.

Simple Page Peel Effect with jQuery & CSS