Paper tearing animation

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?
Perumal_RMAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Prakash SamariyaConnect With a Mentor IT ProfessionalCommented:
@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
 
Prakash SamariyaIT ProfessionalCommented:
0
 
Perumal_RMAuthor Commented:
Thanks Prakash. I am after a Paper Tearing or ripping effect in jQuery.
0
 
Pallavi GodseSr. Digital Marketing ExecutiveCommented:
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
 
Perumal_RMAuthor Commented:
https://codepen.io/dissimulate/pen/KrAwx
something similar which has gift wrapping paper image
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.