[ZT]Simple Page Peel Effect with jQuery & CSS

Simple Page Peel Effect with jQuery & CSS

Tags: Intermediate, Widgets

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:

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

Related Posts

• Automatic Image Slider w/ CSS & jQuery
• Facebook Style Footer Admin Panel Part 2
• Facebook Style Footer Admin Panel Part 1
• Simple Tabs w/ CSS & jQuery
• Guest Post – Creating an Image Rotator

Author Bio

My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!

You can learn more about me or   Follow me on twitter for more updates and resources!

Flash Effect: http://www.marcofolio.net/webdesign/create_a_peeling_corner_on_your_website.html