Newbie question. How to animate stuff - not flash

[derboy]

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

 

[wheelhot]

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

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.

 

[angelwatt]

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.

 

[derboy]

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/

 

[wheelhot]

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.

 

[angelwatt]

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.

 

[AdeFowler]

If you want something impressive but easy to create check out BannerZest.

http://www.aquafadas.com/en/bannerzest/

It's Flash but without the learning curve.

 

[DoFoT9]

use quicktime baha!

 

[derboy]

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