How can I use jQuery/CSS to make a realistic cutting effect with an animated scissors gif?

Question

I am looking for the best/nicest way to make an animation of a pair of scissors cutting out a div?

I was thinking it would be cool if an animated .gif like this http://img.photobucket.com/albums/v29/wormholes201/animated-scissors.gif was somehow animated to move around the 4 corners of a div, having it rotate and change directions on the corners?Or maybe something with a sprite? Or something with 3D CSS?

Thanks for helping!

Are you asking which would look the best? Programmers aren't always the best graphic designers :p — RustyTheBoyRobot, Dec 20 '12 at 05:09
I don't know what you mean about using a sprite, but you other options are completely viable. — RustyTheBoyRobot, Dec 20 '12 at 05:10

score 1 · Accepted Answer · answered Dec 20 '12 at 06:17

You can use .offset(), .height() and .width() to calculate the metrics of the border of the element, and use those to move the image...

HTML:

<div id="paperTrail"></div>
<img src="http://img.photobucket.com/albums/v29/wormholes201/animated-scissors.gif" id="ToBeAnimated">

CSS:

#paperTrail{
    position:relative;
    left:100px;
    top:100px;
    height:200px;
    width:300px;
    border:1px black solid;
}
#ToBeAnimated{
 position:absolute;
    transition:all 1s;
}

JS:

function animationLoop() {
    $("#ToBeAnimated").css({
        top: ($("#paperTrail").offset().top - parseInt($("#ToBeAnimated").height()) / 2),
        left: ($("#paperTrail").offset().left - parseInt($("#ToBeAnimated").width()) / 2)
    }).rotate(270);
    $("#ToBeAnimated").animate({
        top: $("#paperTrail").offset().top + $("#paperTrail").height() - $("#ToBeAnimated").height() / 2
    }, 2000, function() {
        $(this).animate({
            rotate: "180deg"
        }, function() {
            $("#ToBeAnimated").animate({
                left: $("#paperTrail").offset().left + $("#paperTrail").width() - $("#ToBeAnimated").width() / 2
            }, 2000, function() {
                $(this).animate({
                    rotate: "90deg"
                }, function() {
                    $("#ToBeAnimated").animate({
                        top: $("#paperTrail").offset().top - $("#ToBeAnimated").height() / 2
                    }, 2000, function() {
                        $(this).animate({
                            rotate: "0deg"
                        }, function() {
                            $("#ToBeAnimated").animate({
                                left: $("#ToBeAnimated").width() / 2
                            }, 2000, function() {
                                setTimeout(animationLoop, 2000);
                            });
                        });
                    });
                });

            });
        });
    });
}
animationLoop();

JsFiddle: http://jsfiddle.net/djb3T/

Wow... Thanks! That was exactly what I was hoping to accomplish :) — DigitalMediaGuy, Dec 20 '12 at 06:25
I have been having a hard time getting the rotation to work on my actual site... I don't see any errors either!?! Would you mind taking a look? [my site](http://www.extremecouponnetwork.com/brand-coupons.html) You see the "Clip It" Button at the bottom of each coupon... when you click it the animation starts... NOTE: It also over shoots my top left corner on the return and I can't figure out why? Thanks again... Much appreciated :) — DigitalMediaGuy, Jan 03 '13 at 06:33

How can I use jQuery/CSS to make a realistic cutting effect with an animated scissors gif?

1 Answers1