SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Opinions on best way to animate an image without using flash.

    Hello,

    I'm going to be working on a new site and I wanted to make an image of a gem rotating on the home page. I would normally try to do this with flash, but for unknown reasons I was told not to use Flash. Any suggestions on what would be the best way to go about this?


    Thanks!

  2. #2
    phpLD Fanatic bronze trophy dvduval's Avatar
    Join Date
    Mar 2002
    Location
    Silicon Valley
    Posts
    3,626
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Sure, two words: Animated Gif
    If you search for this there are sites that help you make them too.

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to mention I'd rather not use an animated GIF because the quality decreases.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blamethemusic View Post
    I would normally try to do this with flash, but for unknown reasons I was told not to use Flash.
    Hmm, fat, bloated, requires a plugin, plugin not available to all devices... plenty of legitimate reasons not to flush a perfectly good website down the crapper with "flash for nothing"... there's a reason the term "flashtard" exists; using flash for ANYTHING other than FMV or games on a website == pointless bloat.

    But I'm one of the people who HATES flash on websites for anything other than a game or videos like youtube; to me using it for anything else is just turning the website into useless garbage... and don't even get me STARTED about all the total trash completely useless websites that are built in nothing BUT flash -- see the official websites for most computer games.

    Quote Originally Posted by blamethemusic View Post
    Any suggestions on what would be the best way to go about this?
    Well, if you don't have flash and since GIF sucks (which it does!) the only real answer for animated is going to be to use javascript... which ends up leaving us asking more questions:

    1) is the user going to interact with the animation, or is it just a fixed rotation?

    2) is this going to be a vector drawing or multiple static frames (like jpegs)?

    3) Is the client going to get their panties in a wad if it doesn't work when javascript is disabled (NOT that there's a lot one can do about that in the first place)

    Those answers can change how you handle it a good deal.

    If it's just a non-interaction bunch of static frames, that's easy enough to do using settimeout and by loading the individual images from the scripting -- you could even 'filmstrip' them to a single image one over the other and slide them around as a background to show the one you want...

    While it might look crappy, you could also create a .gif for people browsing without javascript, and put it into a NOSCRIPT tag in the markup.

    If you have the frames/images I could toss together a quick code example on how it's done.

    You might ask in the javascript section of these forums too -- just be leery of those who will tell you to use some off the shelf 20k script that relies on a few hundred k of scripting libraries to do the job of 2-4k of REAL javascript -- usually because the person who wrote said scripts knows not enough javascript AND not enough CSS in the first place.

    In other words, just say no to jquery, mootools, yui, etc, etc...

  5. #5
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    While it might look crappy, you could also create a .gif for people browsing without javascript, and put it into a NOSCRIPT tag in the markup.
    I would second this recommendation.

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey deathshadow,

    Thanks for your suggestions and explaining the reasons not to use flash. I don't think it's going to be interactive. It's basically going to be a fixed rotation. I have about 6 jpegs I wanted to experiment with. I'll send them on over to you too. I'm not very familiar with javascript, at least not yet. You're right, it might be a good idea to post this question in the javascript forums too. Thanks again!

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by blamethemusic View Post
    I'm going to be working on a new site and I wanted to make an image of a gem rotating on the home page.
    Wow ... I've travelled back in time and it's 1997 again

    Come on, that kind of animation is soooo last millennium ... or are you really going for this kind of site?

  8. #8
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    My stock advice is that looping animations tend to hold a visitor's interest for juuust long enough for them realise how annoying it is and move off. How many popular sites employ animations (other than for presenting content)? If the feature is a must have, ensure a means to pause the animation is provided.

  9. #9
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree that a rotating image can be cheesy if done improperly.

    One option you may want to consider is doing the rotation only on hover?
    http://goodchee.com/ has a rotating animation of their logo on hover (they use CSS3 animations, so you can only see the rotation on webkit browsers like Chrome or Safari)

  10. #10
    Community Advisor silver trophy

    Join Date
    Nov 2006
    Location
    UK
    Posts
    2,559
    Mentioned
    40 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    don't even get me STARTED about all the total trash completely useless websites that are built in nothing BUT flash --
    thefwa.com
    nuff said
    All those site featured are terrible, just terrible
    Last edited by EastCoast; Dec 20, 2010 at 13:47. Reason: spelling


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
  •