|
Copied To Clipboard!
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>MiniDaemon Text Fade in / Fade out</title>
<script type="text/javascript">
<!--
// Begin MiniDaemon Text Fade in / Fade out
// == This Script Free To Use Providing This Notice Remains == //
// == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == //
// == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == //
// == Created by: Mozilla Developer Network : https://developer.mozilla.org/en-US/docs/DOM/window.setInterval : Creative Commons License == //
function MiniDaemon (oOwner, fTask, nLen, nRate) {
if (!(this && this instanceof MiniDaemon)) { return; }
if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
if (oOwner) { this.owner = oOwner };
this.task = fTask;
if (nLen > 0) { this.length = Math.floor(nLen); }
if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
}
MiniDaemon.prototype.owner = null;
MiniDaemon.prototype.task = null;
MiniDaemon.prototype.length = Infinity;
MiniDaemon.prototype.rate = 100;
/* These properties should be read-only */
MiniDaemon.prototype.SESSION = -1;
MiniDaemon.prototype.INDEX = 0;
MiniDaemon.prototype.PAUSED = true;
MiniDaemon.prototype.BACKW = true;
/* Global methods */
MiniDaemon.forceCall = function (oDmn) {
oDmn.INDEX += oDmn.BACKW ? -1 : 1;
if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
return true;
};
/* Instances methods */
MiniDaemon.prototype.isAtEnd = function () {
return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
};
MiniDaemon.prototype.synchronize = function () {
if (this.PAUSED) { return; }
clearInterval(this.SESSION);
this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
};
MiniDaemon.prototype.pause = function () {
clearInterval(this.SESSION);
this.PAUSED = true;
};
MiniDaemon.prototype.start = function (bReverse) {
var bBackw = Boolean(bReverse);
if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
this.BACKW = bBackw;
this.PAUSED = false;
this.synchronize();
};
-->
</script>
<style type="text/css">
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
#snapbuilder_div {
visibility:hidden;
}
</style>
</head>
<body>
<div id="content">
<h3>MiniDaemon Text Fade in / Fade out</h3>
<p>
<input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /> <input type="button" onclick="fadeInOut.start(true);" value="fade out"> <input type="button" onclick="fadeInOut.pause();" value="pause" />
</p>
<div id="snapbuilder_div">Your Text Here</div>
<script type="text/javascript">
function opacity (nIndex, nLength, bBackwards) {
this.style.opacity = nIndex / nLength;
if (bBackwards ? nIndex === 0 : nIndex === 1) {
this.style.visibility = bBackwards ? "hidden" : "visible";
}
}
var fadeInOut = new MiniDaemon(document.getElementById("snapbuilder_div"), opacity, /* length: */ 8, /* frame-rate: */ 300);
</script>
<p>
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_178.html">MiniDaemon Text Fade in / Fade out Code Snippet</a> page. ]
</p>
</div>
</body>
</html>
|