Geek asks and answers

JQuery Animation: Create a sprite that will walk, not float / slide

I am writing a small animation jQuery script that mimics a delivery man walking towards a door. Animation works and that’s it, but it looks so artificial. I am wondering if there is a way to sprite like a bean back and forth in order to give the impression that it really goes. I would not want to think that the only way to do this is to speak up all the points - I hope that there is some kind of plug-in that could simplify this.

JSFiddle Demo (you will need a wide monitor, the scene will have a width of 1102 pixels)

Does anyone know about this?

HTML

<div class="indexHeader">
    <img src="http://img705.imageshack.us/img705/2410/deliveryman.png" class='deliveryMan' />
</div>

CSS

.indexHeader{
    width:1102px;
    height:367px;
    background:url(http://img839.imageshack.us/img839/3298/indexheader2.png);
    overflow:hidden;  
}

.deliveryMan{
    position:relative;
    width:415px;
    height:520px;
    top:0px;
    left:450px;    
}

JQuery

$('.deliveryMan').animate({
    'left': '+=310px',
    'top': '+=30px',
    'width': '275px',
    'height': '344px'    
}, 4000);
+3
source share
3 answers

, .

  • jQuery easing
  • easInOutBounce , "top"

jQuery

$('.deliveryMan').animate({
    'left': '+=310px',
    'top': '+=30px',
    'width': '275px',
    'height': '344px'    
}, {
    duration: 4000,
    specialEasing: {
      top: 'easeInOutBounce'
    }
});

.

http://jsfiddle.net/Hm7ZQ/

+3

. , : -)

http://jsfiddle.net/eKCw6/2/

+1

You can use this great plugin, pretty much plug and play http://www.spritely.net/

Otherwise, I don’t think the problem is with JS or CSS, but rather with how you create your “frames” in the image sprite. The bounce effect should be there, in my opinion, not in the script.

0
source

More articles:


All Articles