Create a page peel effect with jQuery
Introduction
You have seen the effect – a website that has in its corner an animation that looks like a page from a book is being opened (this same effect is used on the BloggyBits website). This is called a page peel effect and is an increasingly popular design element. Up till recently, it was quite a challenge to create something like similar. Luckily for us, now our favorite java script library jQuery has a plugin to do just that – the pagePeel plugin.
The page peel effect - a solution to banner blindness
The includes
In order for this to work we will need to include the jQuery library and the pagePeel plugin itself in the HEAD section of our HTML document.
<head> <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/pp/jQuery.pagePeel.js"></script> </head>
Here jquery.js is in the same directory as our html file and jQuery.pagePeel.js is in the pp directory. We have to include them in that order.
After that we have to create a DIV, that is going to be converted to our page corner. It is best that the DIV is positioned in at the bottom of the <body> section, before the closing </body> tag.
........... <div id="pagePeel"></div> </body> </html>
The code
Now that we have all the java script files necessary we need to write the code that is going to create our page peel effect. The code should be positioned in the head section, after the included files.
<script type="text/javascript">
$(document).ready(function() {
$('#pagePeel').pagePeel({
bigAd: '/images/bloggy_page_peel_light.gif',
bigSWF: '/pp/page-peel-big.swf',
adLink: 'http://www.stepinto.net',
adLinkTarget: '_blank'
});
}
</script>
$(document).ready is a special jQuery method that allows us to have code executed after the page has loaded.
Inside, on line 2 we have the special method, .pagePeel that was included in the page with the pagePeel library. We are basically converting the DIV with an id of pagePeel into the page corner animation.
The method takes an object as a parameter and you can see from line 3 to line 6 that we have used several properties. bigAd for the background image of the ad, bigSWF is the address of the default swf flash file that comes with the plugin (it creates the page peel effect), adLink for the address that the animation leads to and adLinkTarget is for the target (in this case it opens in a new window).
You maybe wonder where do we specify the size and the position? The default size is 500×500 pixels and we don’t need to specify it additionally (only if we want a different size). For the purpose you can add the following properties: smallWidth and smallHeight (for the small, inactive version) and bigWidth and bigHeight for the full version. There also more interesting properties for which you can refer to at the plugin’s homepage.
You can change the background graphic anyway you like. It is important that it is the same size as the size of the full version of the animation.
Done! You can see a working demo at BloggyBits.com.
Conclusion
That concludes this tutorial. Creating a page flip animation on a web page has never been that easy. This is an original way to present advertisement, or promotions on your site. The best thing about it is that people have not developed the so called banner blindness (ignoring banner or text advertisement on web sites) for this kind of format. At least for now that is.
If you liked this tutorial you can subscribe to our RSS feed or follow us on twitter.