actualli how i want is , suppose there is a vertical text on my page if i click on it, it should be slowly rotated(depending on the speed we give) to normal position(horizontal) can this be possible
I'm not aware of any JS library that can do plain-text rotation. However there's a bunch that do image rotation (google jQuery image rotation)... but that would require converting your text to images... :-/
ok thanks for suggestion but there is another doubt for me (this may be 2 much, its just doubt)
can i joom a text from one plaece to another place what i mean to say is
at one end of the page iam having a text (THE ROCK ) and at the center of the page iam having another text(AUSTIN, this will be in vertical or in any degree) now when i click on AUSTIN (any degree or vertical) it should be rotated to normal text(means horizontal position) with zoom effect .
Just i want to know is it possible or not (only with HTML and JS ) please dont tell this is possible in FLASH . If it is possible tell me how and where can i find tht example
You can also find some examples of slide in / out (use Google to search).
A very important thing not to forget.... Is this animation effect really this critical to your visitor's experience? (This is the "marketing guy" in me talking)
There is a javascript library called "Raphael" located here: Raphaël?JavaScript Library
With this library you can manipulate text and images in any way imaginable.
Here is a simple example that rotates some text 90 degrees on mouseover and back again on mouseout.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><script src="raphael.js" type="text/javascript" charset="utf-8"></script><script>
var rot=0;
var degrees=90;
var speed=3;
var interval=10;
var txt,R,cw,ccw;
function initObj()
{
var container = document.getElementById("holder");
var text = container.getElementsByTagName("span")[0];
var attr1 = {font: '24px Fontin-Sans, Arial', opacity: 1};
R = Raphael("holder", 225, 225);
txt = R.text(110, 110, text.innerHTML).attr(attr1).attr({fill: "#00f"});
text.style.visibility = "hidden";
}
function rotateClockwise()
{
if(ccw){clearTimeout(ccw);}
if(rot<degrees)
{
rot+=speed;
txt.rotate(rot, true);
R.safari();
cw = setTimeout("rotateClockwise()",interval);
}
}
function rotateCounterClockwise()
{
if(cw){clearTimeout(cw);}
if(rot>0)
{
rot-=speed;
txt.rotate(rot, true);
R.safari();
ccw = setTimeout("rotateCounterClockwise()",interval);
}
}
</script></head><body onload="initObj()"><div id="holder" onmouseover="cw = setTimeout('rotateClockwise()',interval);" onmouseout="ccw = setTimeout('rotateCounterClockwise()',interval);"><span>Mouseover to rotate</span></div></body></html>
__________________
Jerry Broughton
Last edited by job0107; 11-12-09 at 08:44 AM.
The Following User Says Thank You to job0107 For This Useful Post:
The way you have it setup, each object must have it's own canvas.
And each canvas must be defined separately.
The div's that are used as the canvases must have their own id's.
You can not assign the same id to different elements.
Each element must have a unique id.
You can also use one canvas with multiple objects and each object on the canvas can be manipulated separately.
Here is an example of two objects using separate canvases.
I am not sure how you are going to use the onchange event listener.
But if you read the documentation you will see that you can assign events to each object separately.
I do not know all the different ways you can use the Raphael library,
because I have not used it myself.
I just happened upon the Raphael library when I was trying to help you.
It took me a little while to figure out how to set it up to make this program work.
So you are going to have to study it and play around with it yourself.
I am not going to hold your hand and do all the learning and programming for you.
There are plenty examples on the Raphael website that you can learn from.
Linear Mode
