css3 点击爆炸下落

一个代码简洁，效果明显的jquery+css3特效
点击div块状，会自动破碎并散落到网页底部
效果预览：http://www.huiyi8.com/css3/

 

 

$(document).ready(function() {

         

    // Generate the clips. In this case I'm using 5 (or 25 pieces)

    (genClips = function() {

         

        // For easy use

        $t = $('.clipped-box');

         　　

        // Like I said, we're using 5!

        var amount = 5;

         

        // Get the width of each clipped rectangle.

        var width = $t.width() / amount;

        var height = $t.height() / amount;

         

        // The total is the square of the amount

        var totalSquares = Math.pow(amount, 2);

         

        // The HTML of the content

        var html = $t.find('.content').html();

         

        var y = 0;

         

        for(var z = 0; z <= (amount*width); z = z+width) {

         

            $('<div class="clipped" style="clip: rect('+y+'px, '+(z+width)+'px, '+(y+height)+'px, '+z+'px)">'+html+'</div>').appendTo($t);

             

            if(z === (amount*width)-width) {

             

                y = y + height;

                z = -width;

             

            }

             

            if(y === (amount*height)) {

                z = 9999999;

            }

             

        }

         

    })();

     

    // A quick random function for selecting random numbers

    function rand(min, max) {

         

        return Math.floor(Math.random() * (max - min + 1)) + min;

         

    }

     

    // A variable check for when the animation is mostly over

    var first = false,

        clicked = false;

     

    // On click

    $('.clipped-box div').on('click', function() {

         

        if(clicked === false) {

             

            clicked = true;

             

            $('.clipped-box .content').css({'display' : 'none'});  

     

            // Apply to each clipped-box div.

            $('.clipped-box div:not(.content)').each(function() {

                 

                // So the speed is a random speed between 90m/s and 120m/s. I know that seems like a lot

                // But otherwise it seems too slow. That's due to how I handled the timeout.

                var v = rand(120, 90),

                    angle = rand(80, 89), // The angle (the angle of projection) is a random number between 80 and 89 degrees.

                    theta = (angle * Math.PI) / 180, // Theta is the angle in radians

                    g = -9.8; // And gravity is -9.8. If you live on another planet feel free to change

                     

                // $(this) as self

                var self = $(this);

                 

                // time is initially zero, also set some random variables. It's higher than the total time for the projectile motion

                // because we want the squares to go off screen.

                var t = 0,

                    z, r, nx, ny,

                    totalt =  15;

                 

                // The direction can either be left (1), right (-1) or center (0). This is the horizontal direction.

                var negate = [1, -1, 0],

                    direction = negate[ Math.floor(Math.random() * negate.length) ];

                 

                // Some random numbers for altering the shapes position

                var randDeg = rand(-5, 10),

                    randScale = rand(0.9, 1.1),

                    randDeg2 = rand(30, 5);

                 

                // Because box shadows are a bit laggy (by a bit I mean 'box shadows will not work on individual clipped divs at all')

                // we're altering the background colour slightly manually, in order to give the divs differentiation when they are

                // hovering around in the air.

                var color = $(this).css('backgroundColor').split('rgb(')[1].split(')')[0].split(', '),

                    colorR = rand(-20, 20),  // You might want to alter these manually if you change the color

                    colorGB = rand(-20, 20),  // To get the right consistency.

                    newColor = 'rgb('+(parseFloat(color[0])+colorR)+', '+(parseFloat(color[1])+colorGB)+', '+(parseFloat(color[2])+colorGB)+')';

                 

                 

                // And apply those

                $(this).css({

                    'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)',

                    'background' : newColor

                });

                  

                // Set an interval

                z = setInterval(function() {   

                     

                    // Horizontal speed is constant (no wind resistance on the internet)

                    var ux = ( Math.cos(theta) * v ) * direction;

                     

                    // Vertical speed decreases as time increases before reaching 0 at its peak

                    var uy = ( Math.sin(theta) * v ) - ( (-g) * t);

                     

                    // The horizontal position

                    nx = (ux * t);

                             

                    // s = ut + 0.5at^2

                    ny = (uy * t) + (0.5 * (g) * Math.pow(t, 2));

                     

                    // Apply the positions 

                    $(self).css({'bottom' : (ny)+'px', 'left' : (nx)+'px'});

                     

                    // Increase the time by 0.10

                    t = t + 0.10;

                     

                    // If the time is greater than the total time clear the interval

                    if(t > totalt) {

                         

                        clicked = false;

                        first = true;

                         

                         

                        $('.clipped-box').css({'top' : '-1000px', 'transition' : 'none'});

                        $(self).css({'left' : '0', 'bottom' : '0', 'opacity' : '1', 'transition' : 'none', 'transform' : 'none'});

                     

                                 

                        // Finally clear the interval

                        clearInterval(z);

                     

                    }

                     

                }, 10); // Run this interval every 10ms. Changing this will change the pace of the animation

         

            });

             

        }

     

    });

     

                 

                 

    r = setInterval(function() {

                 

                 

        // This is a bit rough but it does the job

        if(first === true) {

                 

     

            // I've just put this in so the deleted box will come down again after its been clicked.

            // That way you can keep pressing delete.

                             

            $('.clipped-box').css({'top' : '0', 'transition' : ''});

            $('.clipped-box div').css({'opacity' : '1', 'transition' : '', 'background-color' : ''});

                         

            $('.content').css({'display' : 'block'});

                 

            first = false;

             

        }

                 

    }, 300);

});