Hello to all,
I have a customer that wants animation in his logo, that would be easy with Flash: an image object entering the page from left to right, and after a delay the name of his company in same way.
Hope I was able to explain myself.
And I that thought that the days of the gaudy “spinning flaming logo” were over. To my knowledge I don’t know of any WYSIWYG application that writes .js/CSS animation code. Add to this that HTML5 is a still a DRAFT and am afraid few coders would venture to develop an app for standard that isn’t finalized yet. Also, that was the point of getting away from Flash was to make CODE /CONTENT meaningful an accessible.
HOWEVER… if you are already somewhat familiar with HTML ( any ) and CSS3 there might be a way of doing this w/o a program.
- think graceful degradation. A fall back for browsers that don’t support HTML5 and CSS3 ( you would have had to have done this anyway)
- think accessibility ultimately it should just degrade to text ( screen readers cant see funky spinning logo… they should just read out the company name)
<h1><img classs=‘logo’ src=‘logo.png’> <span>L</span><span>O</span><span>G</span><span>O</span></h1>
- use CSS3: transforms and [URL=“http://www.w3schools.com/css3/css3_animations.asp”]animations. You can assign fonts, spin/rotate, translate any element with transforms; repeat, alter and delay movement. I realize it wont be as right brained as using Flash, but definitely not as left brained as .js
Hello dresden_phoenix and thanks for your advice.
Well , jQuerry is js library, whose claim to fame is to make targeting elements simple vice CCCS-like selectors.
- You would add weight of the jquery library + your script to your page
- CSS3 animations are supported by pretty much all current browsers ( so unless you offer IE7-8 support, or like FF4 support, you can do this w/o jQ)
while not exactly what you asked, this link might be helpful:
Note the AI to canvas plug in, btw
Hello and thanks a lot to all for your answers.
dresden_phoenix, your recommendation gives me confidence in what I decided on the weekend, I found a lot of stuff in animation. And I had thought that the simplest and cleanest way is using CCS3. It is not going to look like in Flash, but this is the new way.
Thanks a lot to all for you kindness and valuable time to answer. I am going to study the links and the CCS3 related documentation.
Hello and thanks to all.
I did my first animation in pure CSS3 when loading the page.
These are the resources:
1.- THE BASICS:
I adapted this example and it worked like a charm
1.1 You have to use keyframes to automatically activate the animation when the page loads, this link shows the difference among the CSS instructions:
CSS3 transition-delay, a way to delay effects on elements. Only works on hover.
CSS3 Keyframe, works on load but are extremly slow. “FROM MY TESTS, IT IS NOT TRUE THAT IS SLOW, joejac”
CSS3 transition is fast enough but do cheer up on page load.
2.- This link also served as another basic data on animmation and examples:
There are tons of information, examples and tutorials but difficult to understand, the above links where easy for me to grasp.
Hope this can help