CODIGOS HTML 6
Texto animado:
Con este recurso puedes hacer que cualquier texto tenga movimiento en tu página. Es ideal para destacar tu logo o lo que vos prefieras.
<script language="JavaScript">
<!--
done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["texto"].top=yp;
else document.all["texto"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.texto.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
texto.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
// --></script>
<div id="texto" style="position: absolute; top: -50; color: #FF8000; font-family: Arial, Helvetica; font-weight:bold; font-size:40px;">
<p><font face="Arial, Helvetica, sans-serif" size="3"><b><font size="6" color="#990000">INGRESA TU TEXTO AQUI</font></b></font></p>
</div>
<script language="JavaScript">
<!--
setTimeout('start()',10);
//-->
</script>
Texto de apertura:
Este es un recurso muy interesante. Podés lograr que, al entrar a tu página, el usuario vea un mensaje de bienvenida o cualquier otro que configures. Luego, el usuario es llevado automáticamente a la página que tú definas.
Para tener este recurso en tu página, sólo debes copiar el siguiente código, pegarlo en tu editor y guardar la página como principal. De esta forma, al entrar a tu página, los visitantes verán los mensajes y luego serán llevados a la página que tú definas. Es muy fácil configurar este recurso. Basta con alterar las áreas destacadas en negrito en el código. Si tienes problemas con algún editor HTML que no reconozca el código, copia y pega este código en el bloc de notas del Windows u otro editor de texto y no olvides guardarlo con extensión html.
<HTML>
<HEAD>
<TITLE>Ingresa el título aquí</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function makeArray() {
this.length = makeArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i + 1] = makeArray.arguments[i];
}
function makeSlideShow (obj, wait, pre, url) {
this.curText = '';
this.posit = 1;
this.word = obj;
this.length = obj.length;
this.pre = pre;
this.wait = wait;
this.url = url;
this.display = displaySlideShow;
}
function displaySlideShow() {
if (this.posit <= this.length) {
this.curText = this.word[this.posit]
outStringWord = blankFrameTop + this.pre + this.curText + blankFrameBottom;
parent.draw.location = 'javascript:parent.outStringWord';
this.posit++;
}
else {
doneLoop = true;
top.location = this.url;
}
}
function displayLoop() {
if (!doneLoop) reDraw = setTimeout('displayLoop()', wordIntro.wait);
wordIntro.display();
}
var words = new makeArray ('Ingresa el primer texto aquí', 'Ingresa el segundo texto aquí', 'Ingresa el tercer texto aquí', 'Ingresa el cuarto texto aquí', 'ABRIENDO EL SITIO... ');
var wordIntro = new makeSlideShow (words, 2500, '<CENTER><BR><BR><BR><BR><BR><BR><BR><BR><FONT SIZE = 5>', 'Ingresa aquí el URL de la página que aparecerá');
var blankFrameTop = '<HTML><BODY BGCOLOR = "#000000" TEXT = "#FFFFFF">';
var blankFrameBottom = '</BODY></HTML>';
var blankFrame = blankFrameTop + blankFrameBottom;
var doneLoop = false;
</SCRIPT>
</HEAD><FRAMESET onLoad = "displayLoop()" ROWS = "100%, *" FRAMEBORDER = NO BORDER = 0>
<FRAME
SCROLLING=AUTO
SRC = "javascript:parent.blankFrame"
NAME = "draw"
MARGINWIDTH = 2
MARGINHEIGHT = 2>
</FRAMESET>
</HTML>
Texto en la barra de estado:
Con este recurso podés incluir varios mensajes, novedades y noticias sobre tu sitio. Es una forma de destacar lo que quieras y también de agregar un efecto diferente a tu sitio.
<script LANGUAGE="JavaScript">
<!--
var speed = 10
var pause = 1500
var timerID = null
var bannerRunning = false
var ar = new Array()
ar[0] = "Ingresa aquí el primer texto "
ar[1] = "Ingresa aquí el segundo texto"
ar[2] = "Ingresa aquí el tercer texto"
ar[3] = "Ingresa aquí el cuarto texto"
ar[4] = "Ingresa aquí el quinto texto"
var message = 0
var state = ""
clearState()
function stopBanner() {
if (bannerRunning)
clearTimeout(timerID)
timerRunning = false
}
function startBanner() {
stopBanner()
showBanner()
}
function clearState() {
state = ""
for (var i = 0; i < ar[message].length; ++i) {
state += "0"
}
}
function showBanner() {
if (getString()) {
message++
if (ar.length <= message)
message = 0
clearState()
timerID = setTimeout("showBanner()", pause)
}
else {
var str = ""
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
}
window.status = str
timerID = setTimeout("showBanner()", speed)
}
}
function getString() {
var full = true
for (var j = 0; j < state.length; ++j) {
if (state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = getRandom(ar[message].length)
if (state.charAt(num) == "0")
break
}
state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
return false
}
function getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
// -->
</script>
Paso 2: Ingresa el siguiente código en la etiqueta <body> de tu página:
<Body onLoad="startBanner()">
Si ya existen otros parámetros en tu etiqueta body, sólo agrega un espacio después del último e incluye onLoad="startBanner()".
Este comando es importante para hacer que el texto aparezca en la barra de estado inmediatamente al cargarse la página.
Efecto de apertura:
Este es un recurso fabuloso y muy fácil que permite crear un efecto de entrada a tu página. Es sólo copiar y pegar el código en tu página. Siempre que alguien acceda a tu sitio el efecto será activado.
<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>
<div id="i1" class="entrada"></div>
<div id="i2" class="entrada"></div>
<div id="i3" class="entrada"></div>
<div id="i4" class="entrada"></div>
<div id="i5" class="entrada"></div>
<div id="i6" class="entrada"></div>
<div id="i7" class="entrada"></div>
<div id="i8" class="entrada"></div>
<script language="JavaScript1.2">
//
var velocidade=10
var tempo=new Array()
var tempo2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
tempo[i]=eval("document.i"+i+".clip")
tempo2[i]=eval("document.i"+i)
tempo[i].width=window.innerWidth/8-0.3
tempo[i].height=window.innerHeight
tempo2[i].left=(i-1)*tempo[i].width
}
}
else if (document.all){
var clipbottom=document.body.offsetHeight,cliptop=0
for (i=1;i<=8;i++){
tempo[i]=eval("document.all.i"+i+".style")
tempo[i].width=document.body.clientWidth/8
tempo[i].height=document.body.offsetHeight
tempo[i].left=(i-1)*parseInt(tempo[i].width)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
tempo[i].bottom-=velocidade
for (i=2;i<=8;i=i+2)
tempo[i].top+=velocidade
if (tempo[2].top>window.innerHeight)
clearInterval(stopit)
}
else if (document.all){
clipbottom-=velocidade
for (i=1;i<=8;i=i+2){
tempo[i].clip="rect(0 auto+"+clipbottom+" 0)"
}
cliptop+=velocidade
for (i=2;i<=8;i=i+2){
tempo[i].clip="rect("+cliptop+" auto auto)"
}
if (clipbottom<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>
¿Querés cambiar el color? Podés cambiarlo por cualquier otro color. ¡Es muy fácil:
Observá que existe una parte del código que contiene:
<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>
Donde dice "green", debes poner el nombre en inglés o el código hexadecimal del color que deseas.
Podés también seleccionar uno de los colores que siguen y sustituir la referida parte del código original por esta nueva que vas a recibir.
Versión para imprimir
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?