Centering a shrinking image

JavaScript
1

I have a large image which is centred horizontally and is 300px from the top of the web page. I have some code which will shrink the image, but am struggling to know how to ensure that the image remains centred as it shrinks, and also moves to the top of the page. Can anyone point me in the right direction? The code I have so far is…

 window.onload = function(){
  $("#logo").animate({width: "-=400", height: "-=200"}, 5000);
};
2

You don’t need jquery for this at all and how you do it with plain javascript depends to some extent on your html markup.

But in general you can use setInterval() to create an animation of the shrinking image. The image will remain centered horizontally if its container has margin-left and margin-right set to auto. While the image is shrinking you can also gradually move the image up in the same setInterval().