?
Solved

Paper tearing animation

Posted on 2016-11-02
6
Medium Priority
?
197 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
6 Comments
 
LVL 10

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 10

Accepted Solution

by:
Prakash Samariya earned 2000 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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

770 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