Page Peel with Jquery


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.

Read more…

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.

Read more…

Hope this will help you!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s