Solved

Paper tearing animation

Posted on 2016-11-02
6
58 Views
Last Modified: 2016-11-04
Hi, I am a beginner in jQuery. I would like to create paper tearing effect animation using jQuery or HTML5 or CSS3.

When a user mouse over and drags, the paper should be tearable.

Can anyone suggest some good library to use or point me in the right direction?
0
Comment
Question by:Perumal_RM
  • 2
  • 2
6 Comments
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41869724
0
 

Author Comment

by:Perumal_RM
ID: 41870022
Thanks Prakash. I am after a Paper Tearing or ripping effect in jQuery.
0
 
LVL 4

Expert Comment

by:Elizabeth Anderson
ID: 41870023
Please run the below script in HTML -

html {
  background-image: linear-gradient(#fc6, #6cf, #f66);
  color: #333;
  min-height: 100%;
  padding: 25px;
}
.tearoff {
  width: 38.45em;
  -webkit-filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.25));
}
h1 {
  background-color: #fff;
  float: left;
  font: bold 1.5em/10.4 sans-serif;
	margin: 0;
  text-align: center;
  width: 18em
}
p {
  background-color: #fff;
  background-clip: padding-box;
  border-left: 3px dotted #fff;
  float: right;
  font: 1.25em/2 sans-serif;
  margin: 0 0 .15em;
  text-align: center;
  padding: .5em 0;
  position: relative;
  width: 9em;
}
p:hover {
  animation: tearoff 1s both;
  cursor: default;
  transform-origin: 0 100%;
  z-index: 10;
  -webkit-filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.25));
}
@keyframes tearoff {
  50% { left: 0; }
  60% { transform: rotate(5deg); }
  100% { left: 1.5em; }
}

Open in new window

0
 

Author Comment

by:Perumal_RM
ID: 41870048
https://codepen.io/dissimulate/pen/KrAwx
something similar which has gift wrapping paper image
0
 
LVL 8

Accepted Solution

by:
Prakash Samariya earned 500 total points
ID: 41870224
@Perumal_RM, I don't think this kind of animation has been created in jQuery yet!

Perhaps, if you are good in jQuery+animation, you can create your own, or you might have to take any one effect of already made animations!

Above links are for your reference only if you find similar kind of animations from it!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now