Scribd
Upload
69 views

Script

This document contains code for a script that animates text on a webpage. The script loads lines of text, splits it into characters, and pushes each character into an animation stack. It then runs a main animation loop that updates the position and color of each character on each frame based on easing functions. The characters animate from one line to the next, matching up and fading colors as they go to create a smooth morphing text effect.

Uploaded by

riswanto hanafi
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
69 views

Script

This document contains code for a script that animates text on a webpage. The script loads lines of text, splits it into characters, and pushes each character into an animation stack. It then runs a main animation loop that updates the position and color of each character on each frame based on easing functions. The characters animate from one line to the next, matching up and fading colors as they go to create a smooth morphing text effect.

Uploaded by

riswanto hanafi
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

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.c0[1] += this.cr[1];
this.c0[2] += this.cr[2];
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>

You might also like