Page Peel with Jquery
Posted by Ramani Sandeep on September 24, 2009
Article 1 : Simple Page Peel Effect with jQuery & CSS
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.
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.
Article 2 : Page Peel with Jquery Plugin
A jquery plugin to implement a page peel effect to place ads on your site.
If you haven’t seen it by now, check out the demo.
Now, the one contained inside of the box has its limitations. You have to have enough room to display the full page out (this one’s set up as 500×500). Also, I’ve set the bottom padding of this box to 105px so I don’t cover any content. You could also indent the content 105px or just cover your content. Whatever floats your boat.
Hope this will help you!!!
