| Sección
"Java Scripts" |
|
Lección
84 |
Efecto
de texto saltarín
Este
es un efecto muy hermoso, lo puedes ver aquí
debajo:
Para
lograr este efecto
debes pegar debajo de donde dice <Head>
en el HTML de tu página este código:
</STYLE>
<style type="text/css">
#supertext {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;
}
</style>
|
Esto
lo debes pegar debajo de donde dice <Body>
en el HTML de tu página
<script language="JavaScript1.2">
// Script Original: Lloyd Hassell's
// Mensaje
var thecontent='<h2><font
color="#0000FF">Salta, salta, salta!</font></h2>'
// Tiempo de animación en milisegundos ('' = infinito)
var hidetimer=7000;
// Velocidad
var BallSpeed = 10;
var contentWidth;
var contentHeight;
var maxBallSpeed = 50;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;
function initializeBall() {
if (document.all) {
xMax = document.body.clientWidth
yMax = document.body.clientHeight
document.all("supertext").style.visibility = "visible";
contentWidth=supertext.offsetWidth
contentHeight=supertext.offsetHeight
}
else if (document.layers) {
xMax = window.innerWidth;
yMax = window.innerHeight;
contentWidth=document.supertext.document.width
contentHeight=document.supertext.document.height
document.layers["supertext"].visibility = "show";
}
setTimeout('moveBall()',400);
if (hidetimer!='')
setTimeout("hidetext()",hidetimer)
}
function moveBall() {
if (superballRunning == true) {
calculatePosition();
if (document.all) {
document.all("supertext").style.left = xPos + document.body.scrollLeft;
document.all("supertext").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["supertext"].left = xPos + pageXOffset;
document.layers["supertext"].top = yPos + pageYOffset;
}
animatetext=setTimeout('moveBall()',20);
}
}
function calculatePosition() {
if (xDir == "right") {
if (xPos > (xMax - contentWidth - BallSpeed)) {
xDir = "left";
}
}
else if (xDir == "left") {
if (xPos < (0 + BallSpeed)) {
xDir = "right";
}
}
if (yDir == "down") {
if (yPos > (yMax - contentHeight - BallSpeed)) {
yDir = "up";
}
}
else if (yDir == "up") {
if (yPos < (0 + BallSpeed)) {
yDir = "down";
}
}
if (xDir == "right") {
xPos = xPos + BallSpeed;
}
else if (xDir == "left") {
xPos = xPos - BallSpeed;
}
else {
xPos = xPos;
}
if (yDir == "down") {
yPos = yPos + BallSpeed;
}
else if (yDir == "up") {
yPos = yPos - BallSpeed;
}
else {
yPos = yPos;
}
}
function hidetext(){
if (document.all)
supertext.style.visibility="hidden"
else if (document.layers)
document.supertext.visibility="hide"
clearTimeout(animatetext)
}
if (document.all||document.layers){
document.write('<span id="supertext"><nobr>'+thecontent+'</nobr></span>')
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");
}
</script>
|
Lo
que pinté con rojo es el texto que rebota en la
pantalla, lo cambias los textos por los que te agraden.
Aquí copio nuevamente el código con
opción para seleccionarlo, cortar y pegar en tu
sitio.
Para
ello haces click en cualquier palabra que se halla
dentro de la caja, Te diriges a "Edición"
en el menú superior de la barra de herramientas, e
indicas "Seleccinar todo", luego tomas lo
seleccionado dirigiéndote nuevamente a "Edición",
pero esta vez indicas "Cortar", y
posteriormente te posicionas en tu página, donde
quieres colocar este código, entonces te diriges a
Edición, y le indicas "Pegar".
Si
deseas hacer las cosas más rápido, puedes verificar
en "Edición" (está escrito al lado de las
palabras que indican cada orden) que pulsando
"Control" + una letra determinada, puedes
"seleccionar todo", "cortar" o
"pegar" en forma instantánea y con eso
evitas tener que ingresar constantemente al menú de
"Edición".
Esto
es lo que debes pegar debajo de donde dice <Head>
en el HTML de tu página:
Esto
es lo que debes pegar debajo de donde dice <Body>
en el HTML de tu página:
Si
de todos modos, no funciona este efecto, corta
el código HTML que debes colocar en tu página,
pero antes de hacerlo, pégalo en tu Block de
notas, y luego si córtalo de allí y pégalo en
tu sitio. Ahora si no creo que haya ningún
inconveniente que te impida disfrutar de este
bonito efecto.
Recordemos
que este Script también puede ser hallado en el
programa AAScripter v2, el cual puedes bajar de aquí:
http://www.cyberiapc.com
Buena
suerte.
|
