SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Location
    USA
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sprite and single loop animation

    Hi there,
    I am trying to dodge using flash but I can not find a clever way to accomplish this.
    Ideally I would like to use the sprite to eliminate amount of images but I think it may be a catch 22. Animated image needs to be a single loop BUT if it is a sprite then a whole image would load and animation would play onload and only 1 time...before even being repositioned/shown by a:hover.

    The only other option I can think of is slicing into multiple images and using css for image replacement. Now, I been out of css game for a while....are people still using a JS 'preloaders' to dodge the initial lag and possibly missing that 1-2 sec of animation all together?...if so anything you can suggest?

    Thanks for your time.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't think you can pre-load a run once animated gif because it will be complete before you can show it.

    If the image is applied to any background element it will already have run before you hover it (assuming it has had time to load of course). When you then hover it will be finished. It seems that you can only show animated gifs on hover for them to work each time you hover. If you apply them as a background image first then the hover never plays them again (tested in Firefox only).

    I have no experience with javascript pre-loaders so I don't know if they would also cause the animation to already have run before being shown.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you preload an image then it will load the image and thus the animation will take effect (99% sure)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Picking up where Paul was.

    You have one more option; Have the first page-image of the animation applied in the background. Then load the animation during hover. That would avoid the experience of the first loading-time and the animation would show every time.

    Of course the animation can't be a sprite, but the first image of that animation could well be a part of one sprite for all the animations.

    Code says it better:
    Code:
    #nav li{
    	list-style:none;
    	float:left;
    }
    #nav a{
    	float:left;
    	border:2px outset #ccc;
    	width:60px;
    	height:60px;
    	background:url(not-animated.gif);
    }
    #nav a:hover{
    	background:url(is-animated.gif);
    }
    Code:
    <ul id="nav">
    	<li><a href="#"></a></li>
    	<li><a href="#"></a></li>
    	<li><a href="#"></a></li>
    </ul>
    Happy ADD/ADHD with Asperger's

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes that's a good idea Erik and the delay wouldn't really be noticed

  6. #6
    SitePoint Member
    Join Date
    Jan 2010
    Location
    USA
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you gents,
    I guess I was trying to 'push it' by using a single sprite.
    Animation is so slight that I would much rather avoid it but it has been requested. If it was a looped animation then I could have used 1 animated sprite and 1 static sprite but I guess a few sliced images won't hurt that much.

    Thank you again for your advise, appreciated.


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
  •