Contoh Script Cinta 4
.png) |
| screenshot |
Hello Hello :D
Saya Update lagi tentang Contoh Script Cinta 4 - HTML.... Hehehe
:k :@ :~
Nggakusah banyak bumbu, langsung deh ini resepnya.... >
<script type='text/javascript'>Keterangan
//<![CDATA[
msg = "| For You |";
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="Editor" content="Samuel Sitorus @sams_sitorus">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
background:#000000 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
Editor: Samuel Sitorus
date: 7 Desember, 2013
site: http://www.samuelscouter.blogspot.com.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>
<img src="https://www.facebook.com/ajax/messaging/attachment.php?attach_id=ae972a5471d615fd442a91def60d0a9c&mid=mid.1386430400077%3A1d7ee57f36ce626434&preview=1&width=674&height=674" width="337" height="337" align="right">
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
<div id="frm"></div>
<form id="mtxform" name="mtxform">
<span id="inputext" class="hidden">
<textarea rows="20" cols="30" id="text" name="text">
________________________________________________________________
Kita memang belum lama saling mengenal. Tapi, ini harus kuungkapkan,
aku tidak bisa hanya duduk berdiam diri, dan dipenuhi pikiran serta perasaan yang membuatku tersiksa.
Betapa beratnya kukatakan ini, aku malu dan takut,
Aku tidak sanggup mengatakannya, hanya lewat pesan inilah aku bisa.
Inilah aku, yang begitu mengagumi mu. Hal lebih dari sekedar rasa kagum.
Bahkan, bukan sekedar suka, tapi juga cinta. Aku tidak tahu bagaimana bisa kamu menjadi bagian hatiku
Memang, aku tidak bisa mencintaimu seluas alam semesta
Karena ku tahu suatu saat nanti, alam semesta ini akan lenyap
Aku juga tidak bisa mencintaimu sedalam lautan
Karena ku tahu lautan pun, pasti akan surut
Aku tak bisa mencintaimu dengan cinta yang besar, dan akhirnya hilang
Ku hanya bisa mencintaimu sesederhana kuku
Walaupun kecil, tapi akan selalu tumbuh sampai mati
________________________________________________________________
</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>
//-->
Teks warna Biru > Judul
Teks warna Merah > URL gambar di sebelah kanan
Teks warna Kuning > Kaliat yang mau disampaikan :O
Teks warna Jingga > URL lagu/musik nya
Komentar
Posting Komentar
Tinggalkan jejak penjelajah...