Friday, February 7, 2014

Corner Peel for webpage

Hi,

    Here i will show you, how to create a Corner Peel also called Dog Ear for a webpage. Check the Demo or copy the source using link provided below.

The main features are:
  •  The Corner Peel technique is extended to have image generated dynamically using Canvas, javascript. If you wanted to you change its color & size as per your requirement or, if you want to use static image file instead, you can easily customize the javascript (and CSS) code. 
  • Animation is added while corner peel in idle, it moves up and down (using JQuery). If you dont require animation, you can disable it by customizing the jquery code.
  • This sample webpage is a standalone webpage, no external files are referenced except jquery. This webpage contains, HTML, javascript, jquery, CSS.



The background for the corner peel should be a difference image (for next page) upon click, it will redirect to the next page. I have not used any image instead applied static content (Next Page =>), you can customize it to have an image via CSS (background image).
 I haven't write the whole code for this sample, i copied the required snippets from some site, customized it to have dynamic image and Animation.

Tested with: FireFox13, IE9, Opera11. (Should work in all Canvas supporting browsers).

References:
http://forums.asp.net/t/1811361.aspx/1?HTML+CSS

Demo (and save locally) link:   Check the demo here!


No comments:

Post a Comment