Script

<!
DOCTYPE html>
<html>
<script type='text/javascript'>
//<![CDATA[
msg = "azis_ganteng_";
msg = "" + msg;pos = 0;
function scrollMSG()
{document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",150);}
scrollMSG();
//]]>
</script>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">

<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
background:#000000 url(https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-
ak-prn1/934790_600604309952890_1450960991_n.jpg)no-repeat;background-
size:95%;background-attachment:fixed;
width: 100%;
height: 100%;
color: #000000;
}
#frm {
position: absolute;
height: 100%;
width: 100%;
left: 0%;
top: 0%;
font-size: 2em;
font-weight: bold;
font-family: Chiller;
background: #transparent;
overflow: hidden;
padding: 0.5em;
}
#frm span {
position: relative;
text-align: center;
z-index: 1;
}
#mtxform {
position: relative;
z-index: 10;
}
.hidden {
visibility: hidden;
}
</style>
<link rel="SHORTCUT ICON" href="http://www.hi5style.com/gr/heart.gif">
<script type="text/javascript">
/*
=====
script: morphing text
author: Gerard Ferrandez - [Ge1doot]
date: 20 September, 2008
site: http://www.dhteumeuleu.com
inspiration: http://www.pwang.com/blog/archives/2006/04/post_100.html
quote: Scott Adams, 'The Dilbert Principle'
------------
license: CC-BY-NC - please do not remove this notice !
=====
*/
var mtx = function () {

/* ==== private variables & methods ==== */
var stop = false;
var frm, lineDelay, charDelay;
var colorText, colorMatch, colorGhost, elapsedTime;
var lineIndex = 0;
var lineChar = [];
var animStack = [];
var colorStack = [];
/* ==== rgb color ==== */
function colorRGB (c) {
return 'rgb('
+Math.round(Math.min(255, Math.max(0, c[0])))+','
+Math.round(Math.min(255, Math.max(0, c[1])))+','
+Math.round(Math.min(255, Math.max(0, c[2])))+')';
}
/* ==== Easing functions ==== */
function Ease () {}
Ease.prototype = {
ease : function () {
this.m += this.s;
this.x0 += (this.d * this.m * .0025);
if (this.m == 20) this.s = -1;
return this.x0;
},
init : function (x0, x1) {
this.m = 0;
this.s = 1;
this.d = x1 - x0;
this.x0 = x0;
}
}
/* ==== Load Lines ==== */

function loadLines () {
// read text from HTML form
text = document.forms.mtxform.text.value.split("\n");
// loop through all lines
for (var j = 0; j < text.length; j++) {
var t = text[j];
if (t) {
var n = t.length;
lineChar[j] = [];
// first pass: create characters capture RELATIVE offset
coordinates
for (var i = 0; i < n; i++)
lineChar[j][i] = new Character(t.charAt(i), j);
// second pass: convert to absolute position
for (var i = 0, o; o = lineChar[j][i]; i++) {
if (o.c == "|") {
// remove spaces
lineChar[j].splice(i, 1);
frm.removeChild(o.o);
i--;
} else {
// convert to absolute position and render
o.o.style.position = "absolute";
o.o.style.color = colorRGB(colorText);
o.moveHTML();
// push first line in animation stack
if (j == 0) pushAnim (o, charDelay * i);
}
}
}
}
}
/* ==== Character Constructor ==== */
function Character (c, line) {
if (c == " ") c = "|";
this.c = c;
// create HTML element and append the the container
this.o = document.createElement("span");
this.o.innerHTML = c;
this.o.style.zIndex = 2;
frm.appendChild(this.o);
// capture relative offset positions !
this.x0 = this.o.offsetLeft;
this.y0 = -this.o.offsetHeight * 1.5;
this.x1 = this.x0;
this.x2 = this.x0;
this.y1 = (line + 1) * this.o.offsetHeight;
this.y2 = frm.offsetHeight;
this.mx = new Ease();
this.my = new Ease();
this.c0 = [colorText[0], colorText[1], colorText[2]];
}
/* ==== Character functions ==== */
Character.prototype = {
// ---- character animation ----
anim : function (i) {
// temporization
if (this.delay > 0) {
if (elapsedTime)
this.delay -= new Date().getTime() - elapsedTime;
} else {
// moving
this.x0 = this.mx.ease();
this.y0 = this.my.ease();
this.moveHTML();
if (!this.my.m && !this.mx.m) {
// remove from stack
animStack.splice(i, 1);
// remove dead characters
if (this.off) frm.removeChild(this.o);
}
}
},
// ----- color fading ------
color : function (i) {
this.c0[0] += this.cr[0];
this.ci++;
this.o.style.color = colorRGB(this.c0);
if (this.ci >= this.cs)
colorStack.splice(i, 1);
},
// ----- HTML positioning -----
moveHTML : function () {
this.o.style.left = Math.round(this.x0) + "px";
this.o.style.top = Math.round(this.y0) + "px";
},
// ----- init color fading ------
colorFade : function (c1, steps) {
this.cs = steps;
this.cr = [(c1[0] - this.c0[0]) / steps, (c1[1] - this.c0[1]) /
steps, (c1[2] - this.c0[2]) / steps];
if (this.cr[0] != 0 || this.cr[1] != 0 || this.cr[2] != 0){
this.ci = 0;
colorStack.push (this);
}
}
}
/* ==== push character in the animation stack ==== */
function pushAnim (o, delay) {
// init ease
o.mx.init(o.x0, o.x1);
o.my.init(o.y0, o.y1);
o.delay = delay;
// push stack
animStack.push(o);
}
/* ==== next line ==== */
function nextLine () {
if (lineIndex < lineChar.length - 1) {
// display shadow text
for (var i = 0, o; o = lineChar[lineIndex][i]; i++) {
var s = o.o.cloneNode(true);
s.style.zIndex = 1;
s.style.color = colorRGB(colorGhost);
frm.appendChild(s);
}
// matching next line characters
for (var i = 0, t; t = lineChar[lineIndex + 1][i]; i++) {
for (var j = 0, o; o = lineChar[lineIndex][j]; j++) {
if (o.c == t.c) {
// colors
t.colorFade(colorMatch, o.match ? 1 : 40);
t.match = true;
// swap characters
t.x0 = o.x0;
t.y0 = o.y0;
t.moveHTML();
// remove redundant character
frm.removeChild(o.o);
lineChar[lineIndex].splice(j, 1);
break;
}
}
}
// take off redundant characters
for (var i = 0, o; o = lineChar[lineIndex][i]; i++) {
// set target position (off frame)
o.y1 = frm.offsetHeight;
o.off = true;
o.match = false;
o.colorFade (colorText, 40);
// push in animation stack
pushAnim (o, (lineDelay * .8) + charDelay * i);
}
}
// push next line in animation stack
lineIndex++;
if (lineIndex < lineChar.length) {
for (var i = 0, o; o = lineChar[lineIndex][i]; i++)
pushAnim (o, lineDelay + charDelay * i);
}
}
/* ==== main animation loop ==== */

function main() {
// characters
var n = animStack.length;
if (n) {
var i = n;
while (i--)
animStack[i].anim(i);
} else nextLine ();
// colors
var i = colorStack.length;
while (i--)
colorStack[i].color(i);
// get elapsed time and loop
elapsedTime = new Date().getTime();
setTimeout(main, 16);
}
/* //////////// ==== public methods ==== //////////// */

return {
/* ==== initialize script ==== */
init : function (cont, t1, t2, c1, c2, c3) {
// container
frm = document.getElementById(cont);
lineDelay = t1;
charDelay = t2;
colorText = c1;
colorMatch = c2;
colorGhost = c3;
loadLines();
main();
},
changeText : function () {
document.getElementById("show").className = "";
document.getElementById("inputext").className = "hidden";
lineChar = [];
animStack = [];
colorStack = [];
frm.innerHTML = "";
lineIndex = 0;
elapsedTime = 0;
loadLines();
frm.focus();
},
show : function () {
document.getElementById("show").className = "hidden";
document.getElementById("inputext").className = "";
document.getElementById("text").focus();
}
}
}();
/* ==== init text ==== */

onload = function () {
// mtx.init( el, linesDelay, charsDelay, cText, cMatch, cGhost);

mtx.init("frm", 1500, 150, [255,255,255], [255,64,0], [44,44,44]);
}
</script>
</head>
<body>
<div id="frm"></div>
<form id="mtxform" name="mtxform">
<span id="inputext" class="hidden">
<textarea rows="1000" cols="1000" id="text" name="text"> #HANYA
MAAF#
�Yang menjadi kesalahanku adalah saat KITA
tak lagi menjadi BERSAMA�.
� Maaf aku terlambat menemukanmu...
� Maaf aku membutuhkan waktu terlalu lama untuk mengatakan
bahwa aku mencintaimu..
� Maaf untuk segala harapanku
yang masih ingin bertemu denganmu
saat aku dan kamu sudah tidak lagi sebagai kita...
� Maaf untuk setiap cemburuku pada orang-orang
yang bisa berada dekat denganmu...
� Maaf untuk setiap hari
yang masih kuhabiskan dengan memikirkanmu
meski kamu tidak lagi memikirkanku...
� Maaf untuk setiap rindu ini
yang masih saja untukmu bahkan setelah kamu jauh pergi...
� Maaf, aku masih ingin kamu kembali...
....................................................
. ...............
</textarea>
<embed allowscriptaccess="never" type="application/x-shockwave-flash"

src="http://www.4shared.com/embed/1118846590/5f519b2" width="0" height="0"
flashvars="autostart=true"></embed>
<embed src="https://www.youtube.com/v/G5I8zGYHl54&autoplay=1" type="application/x-
shockwave-flash"wmode="transparent" width="1" height="1"></embed>
</html>

Script

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Script

Uploaded by

Copyright:

Available Formats

<!

<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">

var mtx = function () {

/* ==== Load Lines ==== */

/* ==== main animation loop ==== */

/* //////////// ==== public methods ==== //////////// */

/* ==== init text ==== */

// mtx.init( el, linesDelay, charsDelay, cText, cMatch, cGhost);

<embed allowscriptaccess="never" type="application/x-shockwave-flash"

You might also like