SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering a shrinking image

    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...

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

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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().


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •