<![CDATA[
=====================================================================================
<br>
>>>>>>>>>>>>>>>>>> [ VML - 3D Text_Rotation (Horizontality) ] <<<<<<<<<<<<<<<<<<<<<<<
<br>
=====================================================================================
<br>
<br>
<br>
VML(Vector MarkUp Language) 을 이용한 텍스트를 입체적으로 표현해 왼쪽에서 오른쪽으로
<br>
360도 수평회전을 시키며 설정한 텍스트들을 교체해 줍니다.
<br>
<br>
<br>
<br>
<HTML>
<br>
<HEAD>
<br>
<TITLE>▣ 인터넷 휴게소 : VML - 3D Text_Rotation (Horizontality)</TITLE>
<br>
<br>
<br>
<!---** 1단계: 여기서부터 카피해〈HEAD〉 .. 〈/HEAD〉사이에 복사해 넣는다 **--->
<br>
<br>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<br>
<br>
<style>
<br>
<!--
<br>
v\:* { [안내]태그제한으로등록되지않습니다-behavior: url(#default#VML); }
<br>
-->
<br>
</style>
<br>
<br>
<!---** 여기까지〈head〉 소스 **-->
<br>
</head>
<br>
<br>
<br>
<body>
<br>
<br>
<!---** 2 단계: 아래 스크립트를〈/body〉바로 윗부분에 수정해 넣어준다. **--->
<br>
<br>
<script>
<br>
<!--
<br>
// 텍스트내 배경이미지 지정[new Array("배경그림1주소 또는 파일명, 배경그림2주소 또는 파일명, .... ")]
<br>
// 배경그림을 넣지 않으려면 아래 줄은 -- var pic=new Array("") 이렇게 설정해 놓는다...
<br>
var pic=new Array("natfl004.jpg","red042.jpg","yello013.jpg")
<br>
<br>
// 텍스트 설정 : new Array("내용1,내용2,내용3, ..... ")
<br>
var message=new Array("Welcome","IRP Cafe","Come In !!")
<br>
<br>
var fnt="Arial Black" // 글꼴
<br>
// 텍스트 박스(영역) 크기에 따라 텍스트 크기가 결정...
<br>
var formwidth=800 // 메세지 박스(영역)의 가로크기(폭)
<br>
<br>
// 텍스트 내부색상(위의 배경그림을 설정하지 않았을때 아래 색상값으로 표현)
<br>
var fillcolor="#666666"
<br>
<br>
var backdepth=10 // 글자 뒷부분의 그림자(3D효과)의 길이
<br>
var speed=10 // 에니메이션(회전) 속도
<br>
var opacity="100%" // 불투명도(0: 완전투명 ... 100: 완전불투명)
<br>
<br>
//글자내 그림채우기 형태 : 종류 : frame , tile , pattern
<br>
var filltype="tile" //
<br>
<br>
var pause=2 // 에니메이션 진행 후 다음 메세지 교체 타이밍(단위: 초)
<br>
// 반복유무 결정(반복:,false , 한번 실행 후 정지 : true)
<br>
var stopafterdisplay=false
<br>
var postop=150 // 메세지 박스의 위치값 : 상단에서 아래쪽으로내려오는 위치값
<br>
<br>
// Do not edit below this line
<br>
var circlemark=" "
<br>
var i_angle1=0
<br>
var i_pic=0
<br>
var i_message=0
<br>
var posleft=0
<br>
var pagewidth
<br>
var pageheight
<br>
var longestmessage=0
<br>
var emptyspace=" "
<br>
var flagstarted=false
<br>
pause*=1000
<br>
<br>
var opera=navigator.userAgent.match(/Opera/)
<br>
var ie5=document.getElementById&&document.all&&!opera?1:0
<br>
<br>
for (i=0;i<=message.length-1;i++) {
<br>
if (message[i].length>longestmessage) {
<br>
longestmessage=message[i].length
<br>
}
<br>
longestmessage+=4
<br>
}
<br>
<br>
for (i=0;i<=message.length-1;i++) {
<br>
var emptyspace=""
<br>
var i_emptyspace=(longestmessage-message[i].length)/2
<br>
for (ii=0;ii<=i_emptyspace;ii++) {
<br>
emptyspace+=circlemark
<br>
}
<br>
message[i]=emptyspace+" "+message[i]+" "+emptyspace
<br>
}
<br>
<br>
function initform() {
<br>
pagewidth=document.body.clientWidth
<br>
pageheight=document.body.clientHeight
<br>
posleft=(pagewidth-formwidth)/2
<br>
if (postop=="middle") {
<br>
postop=pageheight/2
<br>
}
<br>
document.getElementById('rectid').style.left=posleft
<br>
document.getElementById('rectid').style.top=postop
<br>
preload()
<br>
}
<br>
function preload() {
<br>
var i_preload=0
<br>
for (i=0;i<=pic.length-1;i++) {
<br>
var imgref=eval‎("document.n"+i)
<br>
if (imgref.complete) {i_preload++}
<br>
}
<br>
if (i_preload>=pic.length-1) {
<br>
window.status=i_preload
<br>
var timer=setTimeout("changeform()",pause)
<br>
}
<br>
else {
<br>
var timer=setTimeout("preload()",50)
<br>
}
<br>
}
<br>
<br>
function changeform() {
<br>
i_angle1+=speed
<br>
if (i_angle1==360) {
<br>
pausenow()
<br>
}
<br>
else {
<br>
if (i_angle1==250) {
<br>
i_pic++
<br>
i_message++
<br>
if (i_pic>=pic.length) {i_pic=0}
<br>
if (i_message>=message.length) {i_message=0}
<br>
document.getElementById('fillid').src=pic[i_pic]
<br>
document.getElementById('textpathid').string=message[i_message]
<br>
flagstarted=true
<br>
}
<br>
document.getElementById('extrusionid').rotationangle=0+","+i_angle1
<br>
if (stopafterdisplay && i_message==0 && flagstarted) {
<br>
document.getElementById('textpathid').string=""
<br>
}
<br>
else {
<br>
var timer=setTimeout("changeform()",20)
<br>
}
<br>
}
<br>
}
<br>
<br>
function pausenow() {
<br>
i_angle1=0
<br>
document.getElementById('extrusionid').rotationangle=0+","+i_angle1
<br>
var timerendpause=setTimeout("changeform()",pause)
<br>
}
<br>
<br>
<br>
if (ie5) {
<br>
document.write('<div id="preloadimages" style="position:absolute;left:-5px;top:-5px;visibility:hidden">')
<br>
for (i=0;i<=pic.length-1;i++) {
<br>
document.write('<img src="'+pic[i]+'" name="n'+i+'" width=1 height=1>')
<br>
}
<br>
document.write('</div>')
<br>
document.write('<v:curve id="rectid" strokeweight="2pt" style="position:absolute;" from="0,0" to="'+formwidth+',0.1">')
<br>
document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" backdepth="'+backdepth+'" diffusity="2.5" metal="true"/>')
<br>
document.write('<v:fill id="fillid" opacity="'+opacity+'" color="'+fillcolor+'" type="'+filltype+'" src="'+pic[0]+'"/>')
<br>
document.write('<v:path textpathok="t"/>')
<br>
document.write('<v:textpath id="textpathid" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string="'+message[i_message]+'"/>')
<br>
document.write('</v:curve>')
<br>
window.onload=initform
<br>
}
<br>
//-->
<br>
</script>
<br>
<br>
<!-----*** 여기까지 소스 ***----->
<br>
<br>
<br>
</body>
<br>
</html>
<br>
<br>
<br>
[미리보기] ☞☞... <a href="http://flyengel.hihome.com/vml/vml_txtrotateh.html" target=nlink>http://flyengel.hihome.com/vml/vml_txtrotateh.html</a>
<!-- -->]]>
카페 게시글
검색이 허용된 게시물입니다.
├☞ 소스 & 가이드
VML
VML - 3D Text_Rotation (Horizontality) - 수평으로 회전하며 교체되는 텍스트
운영자
추천 0
조회 98
05.06.16 19:27
댓글 0
다음검색
