Chữ bay trong trang web

[admin]

Hiệu ứng tạo ra một khối văn bản có thể di chuyển
[Only registered and activated users can see links]
Demo: Chữ bay trong trang web! ([Only registered and activated users can see links])

Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript
<SCRIPT>
<!-- Beginning of JavaScript -
// MessagePong by Urs Dudli and Peter Gehrig

// your message. Attention: a long message will slow down the script!
var your_message="JavaScriptBank.com"

// font-family
var textfont="Verdana"

// font-size
var textsize=20

// font-color
var textcolor="000"

// font-weight (boldness). Set it to a value between 1 and 9
var textboldness=7

// speed
var tempo=40

// average horizontal distance between the letters
var stepx=30

// average vertical distance between the letters
var stepy=20

// do not edit the variables below
var msg=new Array()
var msg=your_message
var message=msg.split("")
var numberofletters=msg.length-1
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
textboldness=textboldness*100
var timer
var xpos=new Array()
var ypos=new Array()
var spancontent=new Array()

for (i=0; i<=numberofletters;i++) {
xpos[i]=0
ypos[i]=0
}

for (i=0;i<=numberofletters;i++) {
spancontent[i]="<span style='position:relative;font-family:"+textfont+";font-size:"+textsize+"pt;color:"+textcolor+";font-weight:"+textboldness+"'>"+message[i]+"</span>"
}

function setValues() {
var firsttimer= setTimeout("setValues2()",2000)
}

function setValues2() {
if (document.all) {
marginbottom = document.body.clientHeight-5
marginright = document.body.clientWidth-5
for (i=0;i<=numberofletters;i++) {
var thisspan = eval("document.all.span"+i)
thisspan.innerHTML=spancontent[i]
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=0
thisspan.postop=0
}
moveball()
}

if (document.layers) {
marginbottom = window.innerHeight-10
marginright = window.innerWidth-10
for (i=0;i<=numberofletters;i++) {
var thisspan=eval("document.span"+i+".document")
thisspan.write(spancontent[i])
thisspan.close()
var thisspan=eval("document.span"+i)
thisspan.left=0
thisspan.top=0
}
moveball()
}
}

function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}

function moveball() {
if (document.all) {
checkposition()
makesnake()
document.all.span0.style.posTop+=stepy
timer=setTimeout("moveball()",tempo)
}
if (document.layers) {
checkposition()
makesnake()
document.span0.top+=stepy
timer=setTimeout("moveball()",tempo)
}
}

function makesnake() {
for (i=numberofletters; i>=1; i--) {
xpos[i]=xpos[i-1]
ypos[i]=ypos[i-1]
}
if (document.all) {
xpos[0]=document.all.span0.style.posLeft+stepx
ypos[0]=document.all.span0.style.posTop+stepy
for (i=0;i<=numberofletters;i++) {
var thisspan=eval("document.all.span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
if (document.layers) {
xpos[0]=document.span0.left+stepx
ypos[0]=document.span0.top+stepy
for (i=0;i<=numberofletters;i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
}

function checkposition() {
if (document.all) {
if (document.all.span0.style.posLeft>marginright) {
stepx=(stepx+randommaker(2))*-1
document.all.span0.style.posLeft-=1
}
if (document.all.span0.style.posLeft<marginleft) {
stepx=(stepx+randommaker(2))*-1
document.all.span0.style.posLeft+=1
}
if (document.all.span0.style.posTop>marginbottom) {
stepy=(stepy+randommaker(2))*-1
document.all.span0.style.posTop-=1
}
if (document.all.span0.style.posTop<margintop) {
stepy=(stepy+randommaker(2))*-1
document.all.span0.style.posTop+=1
}
}
if (document.layers) {
if (document.span0.left>=marginright) {
stepx=(stepx+randommaker(2))*-1
document.span0.left-=10
}
if (document.span0.left<=marginleft) {
stepx=(stepx+randommaker(2))*-1
document.span0.left+=10
}
if (document.span0.top>=marginbottom) {
stepy=(stepy+randommaker(2))*-1
document.span0.top-=10
}
if (document.span0.top<=margintop) {
stepy=(stepy+randommaker(2))*-1
document.span0.top+=10
}
}
}



// - End of JavaScript - -->
</SCRIPT>
<!--
This script downloaded from [Only registered and activated users can see links]
Come to view and download over 2000+ free javascript at [Only registered and activated users can see links]
-->

Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<BODY id=thisbody onload=setValues()>
<SCRIPT>
<!-- Beginning of JavaScript -

for (i=0;i<=numberofletters;i++) {
document.write("<span id='span"+i+"' style='position:absolute'></span>")
document.close()
}

// - End of JavaScript - -->
</SCRIPT>
</BODY>
<!--
This script downloaded from [Only registered and activated users can see links]
Come to view and download over 2000+ free javascript at [Only registered and activated users can see links]
-->


Đoạn mã tương tự:
Tìm ngay trong trang ([Only registered and activated users can see links])
Chữ bay vào theo dãy ([Only registered and activated users can see links])
Chữ bay vào ([Only registered and activated users can see links])
Bạn có thể xem thêm nhiều JavaScript khác về Chữ ([Only registered and activated users can see links]) và Hiệu ứng ([Only registered and activated users can see links])
---------------------------------------
Nguồn: ITVNN