Solved

Paper tearing animation

Posted on 2016-11-02
6
39 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

708 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

20 Experts available now in Live!

Get 1:1 Help Now