Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 0 down vote favorite

The simple effect I'm ultimately after is this:

  • load an image in the centre of a web page
  • have the image slide across to the left
  • then start loading other text and images around it

I don't mind how many separate web pages are required to do this, or how many separate images, but I'd like to know what my options are. I am more programmer than graphic designer, so maybe I'm searching using the wrong technical terms. Maybe "animation" is too grand a term for so simple an effect, but "slide" has other connotations in this context, and between those two things, I'm struggling to find a clear way to a clear answer. I would ultimately like to understand things like:

  • Can the above task be achieved with one image on one page, in HTML, without scripting?
  • Does HTML only support "static" elements that appear on screen, and never change their position? If that is the case, does all animation therefore rely on either having (static) elements with dynamic content, or repeatedly loaded/rendered static elements which give an appearance of movement?
  • How widespread is browser support for the various animation options?

So as the original question suggests, maybe a tutorial would be good. I haven't found a decent one of those yet either!

share|improve this question
I don't see how this is a graphic design question, when you are looking coding solution ( Well, there is flash.... but... ). I voted to close this. – Joonas Nov 23 '12 at 7:40

closed as off topic by Scott, Joonas, plainclothes, JohnB♦, Bakabaka Jan 31 at 18:36

Questions on Graphic Design Stack Exchange are expected to relate to graphic design within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

2 Answers

up vote 1 down vote accepted

For a "pure HTML" solution, you're going to want to look at CSS3 Animations: http://www.w3schools.com/css3/css3_animations.asp

However, if you're looking for cross-browser compatibility, this is not the way to go. As you can see on that page, IE does not support this yet.

I would use javascript for a more cross-browser friendly solution. A good library to use might be jqueryui: http://jqueryui.com

share|improve this answer
IE10 actually does support quite a bit. msdn.microsoft.com/en-us/library/ie/hh673530(v=vs.85).aspx The great thing about CSS animation is that it degrades gracefully and it can be GPU accelerated (unlike jQuery). But I agree if you want to support everything, CSS may not be the best option. – Marc Edwards Nov 23 '12 at 4:54
How many people have javascript disabled as a security risk? Is there a lesser of evils? – omatai Nov 23 '12 at 7:39
1  
@omatai You could use: css3, jquery ( or some other javascript library ) or flash. All of these have some sort of weakness. CSS3 = no cross browser support ( and no click functionality, or one that has a good browser support anyways ). jQuery ( and js in general ) = This is cross browser method. The percentage of people who have disabled js is quite low, AFAIK. Not to mention you can write js so that if a person does have it disabled, it falls back to simpler interface/functionality. flash = quite heavy, good browser support, except some tablets.. namely ios. – Joonas Nov 23 '12 at 7:52
Good example of jquery plugin that has a good solid fallback is Lightbox. Normally, you get a modal window that slides into place and has a nice navigation and so on and so forth... If javascript is disabled, you can still click the image links that open up like any normal html links to image. – Joonas Nov 23 '12 at 8:07
@Joonas What do you mean by "no click functionality"? – Marc Edwards Nov 23 '12 at 12:47
show 3 more comments
up vote 0 down vote

To specifically cover these points:

Can the above task be achieved with one image on one page, in HTML, without scripting?

You could just about fake it with one great big animated GIF embedded in an HTML page, but it wouldn't be an elegant solution. This really needs scripting and CSS.

Does HTML only support "static" elements that appear on screen, and never change their position?

Strictly speaking, yes. However an HTML page may also include embedded CSS and Javascript code which may add animation; it would be more common to have the bulk of the CSS and Javscript in separate files.

If that is the case, does all animation therefore rely on either having (static) elements with dynamic content, or repeatedly loaded/rendered static elements which give an appearance of movement?

More static elements (containing images, blocks of text, or empty to start with) with movement or their content loaded by scripts.

But I would definitely suggest using HTML + CSS to statically position elements first, before looking at any scripting or animation.

share|improve this answer
Thanks - that is really helpful :-) – omatai Nov 27 '12 at 18:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.