Newbie question. How to animate stuff - not flash

Discussion in 'Web Design and Development' started by derboy, Nov 12, 2008.

  1. derboy macrumors regular

    Joined:
    Feb 25, 2004
    Location:
    UK
    #1
    Hi there,

    My website needs a redesign, and whilst iWeb made a very easy site i now want something a lot slicker.

    I am going to Use dreamweaver that comes with cs3. The website is for my product design portfolio and so is like a gallery. So i'm already prepared for a learning curve. This time im going to code it all.

    The question is, what do you use to make images and borders animate to fit other content when you click on it. I don't want to use flash. I want to achieve a gallery page that acts like lightview but all on one page layer. How do you animate simple boxes?

    Any useful links would be great.

    Cheers
     
  2. wheelhot macrumors 68020

    Joined:
    Nov 23, 2007
    #2
    welcome to the world of fun, excitement, high-blood pressure and a good pat on the back. Lol where the heck did I get the idea to say that :p

    Oh well back to the op question. Well okay, since you are going to start coding all the way, here is some tips or so called "guidelines".

    HTML - only for content (text and etc) no coloring in HTML or whatsoever.
    CSS - this is where you start styling your page and this is also where most headache come from.
    JavaScript - when you get used with CSS, then comes some simple programming language, take your time to learn it but hey, the Web has evolve so much that you don't need to write everything on your own. There are JavaScript frameworks to do the work for you (some knowledge of JavaScript is needed, how it works and etc.), JavaScript frameworks that I can recall in my mind is JQuery (I like this one, use it all the time), Prototype-Script.aculo.us (Apple uses it), MooTools, Dojo (pretty popular with its snazzy animation and development). Hmm anything else? Well those are the popular ones that I can remember right now.

    The gallery you are talking about, is it image gallery? and how do you imagine your gallery to work? I can give you some ideas on where to look, cause some of the ideas that we got, there is actually a keyword for it which will make search MUCH easier.

    P.S: HTML, CSS and JavaScript is things that a web designer needs to know, a web developer will need to know about server side coding which is even more things to remember and learn... (I'm currently learning server side). Hope this help ya.
    Almost forget, w3schools.com (search for this, can't remember the proper URL) is a very good site to learn the syntax and etc.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    It depends on the specific types of animation you want. If you're just talking about a link changing that has a background image to a different one when the visitor places their mouse over it, then that's pretty easy. Those are called hover or mouse over effects. Though if you're talking about having an image that changes and shows a character dance across the screen, that's a much more involved animation.

    The more basic animation I described can be done with just CSS, but more advanced stuff will require JavaScript. There's a number of pre-made items (CSS- and JavaScript-based) that will help you out. If you elaborate and explain what you mean by animation we can offer more specific solutions.
     
  4. derboy thread starter macrumors regular

    Joined:
    Feb 25, 2004
    Location:
    UK
    #4
    Thanks for the replies,

    That definitely helped my google searches. 'dynamic website content' doesn't really come up with much!!

    I can see my website having a very simple exterior and a complex behind the scenes coding! I've had a look at the Java core commands and they look like good starting points.

    I dont know whether to de-construct some lightview code or build my own from the ground up.

    This site has some good dynamic content i think. Its just a flash encoded movie isnt it?!?
    http://www.seymourpowell.com/
     
  5. wheelhot macrumors 68020

    Joined:
    Nov 23, 2007
    #5
    aaah yes, that website is flash. Very easy to know if something is flash or not is just by right clicking on it then 99% you will know if its flash or not.

    yeah, dynamic website content won't tell much.

    Oh yea, another thing forget to tell you, Java is not equal to JavaScript. Its 2 different thing, the real name of JavaScript is ECMAScript. I won't go into why its called JavaScript but you need to know that JS is not at all related to Java.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    As far as building a lightview script from ground up, I've done that myself, and unless you just want the coding practice, don't try. Some of the basic parts are easy, but once you start having to deal with compatibility with IE you'll start pulling out your hair and you'll find 60% of your effort goes into making things cross-browser compatible. You might be able to deconstruct one and see how it works if you need to tweak it, but be sure to check out the copyright that gos with the script. Some are free to tweak, others aren't, and some require that you give your tweaks away as free and not charge anyone for your new version.

    If you just want something like lightview, there's tons of scripts out there. Search this forum for some, and there's a page that show all of the lightbox (the original) clones and what their capabilities are. Some search terms: "javascript image presenter," "javascript effects," or "javascript animating content." etc. Most of the JavaScript libraries offer easy ways to do some animation like slider boxes, fade in, fade out, etc.
     
  7. AdeFowler macrumors 68020

    AdeFowler

    Joined:
    Aug 27, 2004
    Location:
    England
    #7
  8. DoFoT9 macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
  9. derboy thread starter macrumors regular

    Joined:
    Feb 25, 2004
    Location:
    UK
    #9
    Thanks for all the replies and good advice. Thought i'd give an update

    I'm still going to use dreamweaver & css. But for the animation i am undecided between mootools and adobe spry. I cant really tell the difference, but i know there will be some opinions here!

    http://labs.adobe.com/technologies/spry/demos/gallery/source.html
    http://demos111.mootools.net/Fx.Morph

    I've added two preview images of what i want to achieve. very simple. just the white top content box animating to new size to fit different content. The page style is simple but first draft.



    Cheers
     

    Attached Files:

Share This Page