Cara membuat text/tulisan melayang (3D flying text).
Silahkan lihat demo dibawah ini.
Demo:

Kode:

Download text-melayang.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>3D Flying Text</title>
		<style type="text/css" media="screen">
 
			body{
				background:#fff;
				margin:0;
				overflow:hidden;
				padding:0;
			}
			li{
				color:#ddd;
				font:bold 13px Arial,sans-serif;
				list-style: none;
			}
			a{
				text-decoration:none;
			}
 
		</style>
 
	</head>
	<body>
 
		<ul>
			<li><a href="#">A</a></li>
	        <li><a href="#">B</a></li>
	        <li><a href="#">C</a></li>
	        <li><a href="#">D</a></li>
	        <li><a href="#">E</a></li>
 
	        <li><a href="#">F</a></li>
	        <li><a href="#">G</a></li>
	        <li><a href="#">H</a></li>
	        <li><a href="#">I</a></li>
	        <li><a href="#">J</a></li>
	        <li><a href="#">K</a></li>
 
	        <li><a href="#">L</a></li>
	        <li><a href="#">M</a></li>
	        <li><a href="#">N</a></li>
	        <li><a href="#">O</a></li>
	        <li><a href="#">P</a></li>
	        <li><a href="#">Q</a></li>
 
	        <li><a href="#">R</a></li>
	        <li><a href="#">S</a></li>
	        <li><a href="#">T</a></li>
	        <li><a href="#">U</a></li>
	        <li><a href="#">V</a></li>
	        <li><a href="#">W</a></li>
 
	        <li><a href="#">X</a></li>
	        <li><a href="#">Y</a></li>
	        <li><a href="#">Z</a></li>
		</ul>
 
	</body>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
 
	//Setup Arrays that will hold the x,y,z of each element.
	var x = new Array();
	var y = new Array();
	var z = new Array();
 
	//Get the list of items.
	var items = $('li');
 
	//Animate the items.
	function animate()
	{
 
		//Step through each item.
		for(i = items.length - 1; i >= 0; i--){
 
 
			//variables for movement.			
			var xVar = 50 + x[i] 			// x value
			var yVar = 50 + y[i] * z[i]++;	// y value, move towards bottom of screen
			var zVar = 10 * z[i]++;			// z value, text get larger.
 
 
			//Check to see if text position is still on the screen.
			// the #'s are %.   100 is far right or bottom, 0 is top or left.
			// for z value it's the font size in %.
			if (!xVar | xVar < 0 | xVar > 90| 
				yVar < 0 | yVar > 90 | 
				zVar < 0 | zVar > 1500)
			{
				//if it's off the screen randomly pick a starting place.
				x[i]= Math.random() * 2 - 1;
				y[i] = Math.random() * 2 - 1;
				z[i] = 2; 
 
			}
			else
			{
				//if it's still on the screen apply the appropiate styles.
 
				$(items[i]).css("position", "absolute"); // make sure we can move the text around.
				$(items[i]).css("top", xVar+"%");  // y value
				$(items[i]).css("left", yVar+"%"); // x value
 
				$(items[i]).css("fontSize", zVar+"%"); // font size (illusion of perspective.)
				$(items[i]).css("opacity",(zVar)/3000); // fade in from the distance.
			}
		}
 
		setTimeout(animate, 9);
	}
 
animate();
 
</script>
 
 
</html>