сейчас на сайте:
Лучшие сказки мира
Детектив и фантастика
Песни прошлых лет
Для досуга
смотреть оглавлениепримерразмер кода
Spinning || Circular || Radar || Wiping || Hanging || Piston || See Saw || Swing || Pulse || Big Wheel
Use the inputs above to create an effect then left click on the display below to copy the function to your clipboard. This function is then pasted into the main script. You can copy the main script to your clipboard by clicking here.
Note: After upgrading to IE6 some of these effects did not function correctly, after much trial and error I found that by keeping the difference between F_StartPosx & T_StartPosx values to at least 2 and the difference between F_StartPosy & T_StartPosy values to at least 2 made those effects work again.
To create these animated text effects, the Shapes Line element is used.
<v:line id="obj" from="x","y" to="x","y"> </v:line>
The Line element uses two positioning co-ordinates.
This draws a line between the two points. Two more attributes need to be added to allow text to follow the path of the line created.
Additional subelements can be included to add to the effect. So the basics for creating a line of text is:
<v:line id="obj" from="100","100" to="420","100"> <v:fill on="true"color="blue"/> <v:path textpathok="true"/> <v:textpath id="text" on="true" fitpath="true" string="Your Text"/> </v:line>
With the attribute fitpath set to true the text will stretch the length of the line.
To animate the text javascript is used to move the From co-ordinates and the To co-ordinates independently of each other.
The script is divided into three sections.
1) User Functions. Create your display using the table above.
2) Main Functions. No editing required.
3) Scroll Text. Enter text for scrolling into the array. Edit Text_Change_Position if required.
Depending on your effect, motion is applied along four axis. 1) from x 2) from y 3) to x 4) to y
Function scroll_text requires a position for changing to the next message. The script is set to take this position (Text_Change_Position) from the from x variable F_cos.
If your effect does not move along the from x axis then another axis will have to be used.
At the line:
Text_Change_Position=Math.floor(Math.acos(F_cos)/F_Radian) //
You have to swap Math.acos(F_cos) for the appropriate variables.
1) From X co-ordinates - use - Math.acos(F_cos). 2) From Y co-ordinates. - use - Math.asin(F_sin) 3) To X co-ordinates. - use - Math.acos(T_cos) 4) To Y co-ordinates. - use - Math.asin(F_sin)
In the Effects Creator above there is a display that shows the current position. You can enter a position for when the text changes but be aware that, depending on your effect, the step size could affect the result. Watch the current position display to help choose a text change position. The ability to change the speed of the function is added to help with this. Remember text change position and current position have to match.
Below is the complete page and script. Copy into a new page then paste in your function
<HTML xmlns:v = "urn:schemas-microsoft-com:vml"> <HEAD> <TITLE>Document Title</TITLE> <style> v\:* {BEHAVIOR: url(#default#VML)} </style> <script type="text/javascript"> <!-- //Realise by ApacheJeff // www.huntingground.freeserve.co.uk
// USER FUNCTIONS
function Effect1(){ PASTE YOUR FUNCTION HERE }
// END USER FUNCTIONS
// MAIN FUNCTIONS
function Initialise(){ if(F_Direction==1){ F_Radian=0.017453292519943295} // Clockwise else{F_Radian= -0.017453292519943295 } // Anti-Clockwise F_Start_Angle = F_Radian * F_Start F_Step_Angle = F_Radian * F_Step F_End_Angle = F_Radian * F_End F_A=F_Start_Angle F_cx=F_StartPosx//+Radius F_cy=F_StartPosy//+Radius F_timer="" F_MoveArc() if(T_Direction==1){ T_Radian=0.017453292519943295} // Clockwise else{T_Radian= -0.017453292519943295 } // Anti-Clockwise T_Start_Angle = T_Radian * T_Start T_Step_Angle = T_Radian * T_Step T_End_Angle = T_Radian * T_End T_A=T_Start_Angle T_cx=T_StartPosx//+Radius T_cy=T_StartPosy//+Radius T_timer="" T_MoveArc() document.getElementById("obj").style.visibility="visible" } function F_MoveArc(){ clearTimeout(F_timer) F_A+=F_Step_Angle F_cos=Math.cos(F_A) F_sin=Math.sin(F_A) F_PosX=(F_RadiusX*F_cos)+F_cx F_PosY=(F_RadiusY*F_sin)+F_cy obj.from=parseInt(F_PosX/1.3333)+','+parseInt(F_PosY/1.3333) Scroll_Text() // if(F_Direction==1){ if(F_Fullcircle==1){ F_whole() F_timer=setTimeout("F_MoveArc()",100) return } F_reverse_clockwise() } else{ if(F_Fullcircle==1){ F_whole() F_timer=setTimeout("F_MoveArc()",100) return } F_reverse_anti_clockwise() } F_timer=setTimeout("F_MoveArc()",100) } function F_reverse_clockwise(){ // Reverse path in Clockwise direction if(F_A>F_End_Angle || F_A<F_Start_Angle){ F_Step_Angle = -F_Step_Angle return } } function F_reverse_anti_clockwise(){ // Reverse path in Anti-Clockwise direction if(F_A<F_End_Angle || F_A>F_Start_Angle){ F_Step_Angle = -F_Step_Angle return } } function F_whole(){ if(F_Direction==1){ if(F_End_Angle>360){ F_End_Angle=F_Start_Angle } else{ if(F_Direction==0){ if(F_End_Angle<0){ F_End_Angle=F_Start_Angle } } } } } function T_MoveArc(){ clearTimeout(T_timer) T_A+=T_Step_Angle T_cos=Math.cos(T_A) T_sin=Math.sin(T_A) T_PosX=(T_RadiusX*T_cos)+T_cx T_PosY=(T_RadiusY*T_sin)+T_cy obj.to=parseInt(T_PosX/1.3333)+','+parseInt(T_PosY/1.3333) if(T_Direction==1){ if(T_Fullcircle==1){ T_whole() T_timer=setTimeout("T_MoveArc()",100) return } T_reverse_clockwise() } else{ if(T_Fullcircle==1){ T_whole() T_timer=setTimeout("T_MoveArc()",100) return } T_reverse_anti_clockwise()} T_timer=setTimeout("T_MoveArc()",100) } function T_reverse_clockwise(){ // Reverse path in Clockwise direction if(T_A>T_End_Angle || T_A<T_Start_Angle){ T_Step_Angle = -T_Step_Angle return } } function T_reverse_anti_clockwise(){ // Reverse path in Anti-Clockwise direction if(T_A<T_End_Angle || T_A>T_Start_Angle){ T_Step_Angle = -T_Step_Angle return } } function T_whole(){ if(T_Direction==1){ if(T_End_Angle>360){ T_End_Angle=T_Start_Angle } else{ if(T_Direction==0){ if(T_End_Angle<0){ T_End_Angle=T_Start_Angle } } } } }
// END MAIN FUNCTIONS
//SCROLL FUNCTIONS
txt=new Array() txt[0]="This function" txt[1]="Is still under" txt[2]="Construction" txt[3]="But should be" txt[4]="Ready soon" index=0 Scrolling=0 //Text_Scroll = 0 // position at which the text is changed, added to user functions function Scroll_Text(){ if(Scrolling==0){ index=0 return} if(index==txt.length){index=0} Text_Change_Position=Math.floor(Math.acos(F_cos)/F_Radian) // convert to degrees and round up step=F_Step Display.innerText="Position "+Text_Change_Position+" Change at "+Text_Scroll//Math.floor(Text_Scroll/step)*step if(Text_Change_Position== Text_Scroll){ text.string=txt[index] index++ } }
//END SCROLL FUNCTIONS
setTimeout("Effect1()",1000)
// --> </script> </HEAD><BODY> <v:line id="obj" from="0px,0px" to="0px,0px"> <v:fill on="true"color="blue"/> <v:path textpathok="true"/> <v:textpath id="text" on="true" string="" fitpath="true"/> </v:line> </BODY> </HTML>