CODEWITHSUNDEEP
jquery
Darshan Mistry
Darshan Mistry

Reputation: 1

Stack Photos Throwing effect Using jquery

I want implement stack photos image gallery like photo is thrown by hand.

like this: http://www.youtube.com/watch?v=FlohNb8rnR8

I tried using jquery animate and drop effect but it doesn't look similar. Any idea how can i implement?

Thanks.

Upvotes: 0

Views: 637

Answers (2)

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66991

You'll need to have all the images absolutely positioned and off the screen, then one at a time animate their position somewhere randomly onto the screen, each one having a higher z-index than the previous one.

With jQuery's callback functions you can smoothly get each one to come up after the other. You'll need to come up with some math.random logic with limitations (probably on window height/width etc). But basically the idea is somewhat like this.

var zindex = 100;

$('img').each(function () {
    $(this).css('z-index', zindex++)
           .animate({ top: _yVariable, left: _xVariable }, _timeVariable, function () {
       return; //restart loop once this animations finished
    });     
});

Upvotes: 0

Boyd
Boyd

Reputation: 1165

I highly recommend using greensock for animation over jquery's animate. Greensock has a lot of nice easing options to get nice smooth motion with controllable easing.

Check out the speed test comparing different JS engines.

Upvotes: 1

Related Questions