ayudar con efecto

rascabuchitos · #1 (**permalink**) 03/12/2012, 04:38

hola amigos
encontre esto en internet para poder cambiar el fondo de mi web cada n segundos pero no me sale ponerle un efecto para que al pasar las imagenes no sea tan brusco, agradecere mucho algun tuto o tip

Gracias

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>n segundos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-image: url('1.jpg');
}
</style>
<script type="text/javascript">
var fondos = ['1.jpg', '2.jpg', '3.jpg'];
var fondo_actual = 0;
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var precargar =fondo_actual++;
var precargar2 = precargar+2;
document.body.style.backgroundImage = 'url('+ fondos[precargar]+ ')';
document.getElementById('precarga').style.backgroundImage =  'url('+fondos[precargar2]+ ')';
}
window.setInterval(CambiarFondo, 4000); 
//]]>
</script>
</head>
<body>
<div id="precarga"></div>
<h1>n segundos</h1>
</body>
</html>

IsaBelM · #2 (**permalink**) 03/12/2012, 15:39

prueba con este

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}

html {
display: block;
}

body {
width: 100%;
height: 100%;
background-color: #BEBFBF;
}

#fondo1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-width: 700px;
opacity: 0;
filter: alfa(opacity=0);
}

#fondo2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-width: 700px;
opacity: 0;
filter: alfa(opacity=0);
}

#contenedor {
width: 100%;
height: auto;
z-index: 99;
border: 2px solid yellow;
}
</style>
<script type="text/javascript">
var imagenes = new Array(), nImg, estaImg, contador = 0;

window.onload = function(){
arrImagenes = ['img01.png', 'img02.png', 'img03.png', 'img04.png', 'img05.png'];

nImg = arrImagenes.length;

// precarga
for (var i = 0; i < nImg; i++){
imagenes[i] = new Image();
imagenes[i].src = arrImagenes[i];
}
// precarga

IMG1 = document.getElementById('fondo1');
IMG2 = document.getElementById('fondo2');

fadeIn(1, 0);
}

function fadeIn(kImg, transp){
estaImg = (kImg == 1) ? IMG1 : IMG2;

if(transp==0){
estaImg.src = imagenes[contador++ % nImg].src;
}

estaImg.style.opacity = transp/100;
estaImg.style.filter = 'alpha(opacity =' + transp + ')';
transp = transp + 2.5;
var intervalo = setTimeout(function() {fadeIn(kImg, transp)}, 60);

if(transp >= 100){
clearTimeout(intervalo);
setTimeout(function() {rotarImgs(kImg)}, 1000);
}
}

function rotarImgs(pos){
IMG1.style.zIndex = Math.abs(pos-1);
IMG2.style.zIndex = pos;
pos = (pos == 0) ? 1 : 0;
fadeIn(pos, 0);
}
</script>
</head>
<body>

<img id="fondo1" src="" alt="" />
<img id="fondo2" src="" alt="" />

<div id="contenedor">AQUÍ TODO EL CONTENIDO</div>
</body>
</html>

rascabuchitos · #3 (**permalink**) 04/12/2012, 10:55

Hola IsaBelM
muchas gracias por el efecto...
pero porque me salen scroll?
agradeceria mucho tu orientacion para que sea adaptable como el anterior

IsaBelM · #4 (**permalink**) 04/12/2012, 15:35

me parece que lo que quieres es esto otro

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}

html, body {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
}

#fondo-imag {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#fondo-imag img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
opacity: 0;
filter: alfa(opacity=0);
}

/* COLUMNAS */
#cont {margin: 0 auto; width: 440px; border: 1px solid white;}
#cont div.alineacion {display: inline-block; width: 100px; vertical-align: top; margin: 0 20px;}
.alineacion div {width:100px; border: 1px solid yellow; margin: 20px 0; color: white;}
</style>
<script type="text/javascript">
var imagenes = new Array(), nImg, estaImg, contador = 0;
var arrImagenes = ['img01.png', 'img02.png', 'img03.png', 'img04.png', 'img05.png'];

window.onload = function(){

nImg = arrImagenes.length;

//precarga
for (var i = 0; i < nImg; i++){
imagenes[i] = new Image();
imagenes[i].src = arrImagenes[i];
}

IMG1 = document.getElementById('fondo1');
IMG2 = document.getElementById('fondo2');

fadeIn(1, 0);
}

function fadeIn(kImg, transp){
estaImg = (kImg == 1) ? IMG1 : IMG2;

if(transp==0){
estaImg.src = imagenes[contador++ % nImg].src;
}

estaImg.style.opacity = transp/100;
estaImg.style.filter = 'alpha(opacity =' + transp + ')';
transp = transp + 2.5;
var intervalo = setTimeout(function() {fadeIn(kImg, transp)}, 60);

if(transp >= 100){
clearTimeout(intervalo);
setTimeout(function() {rotarImgs(kImg)}, 1000);
}
}

function rotarImgs(pos){
IMG1.style.zIndex = Math.abs(pos-1);
IMG2.style.zIndex = pos;
pos = (pos == 0) ? 1 : 0;
fadeIn(pos, 0);
}
</script>
</head>
<body>

<div id="fondo-imag">
<img id="fondo1" src="" alt="" />
<img id="fondo2" src="" alt="" />
</div>

<div id="cont">
<div class="alineacion">
<div><b>Noticia1</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
<div><b>Noticia4</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit.</div>
</div>
<div class="alineacion"">
<div><b>Noticia2</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien.</div>
<div><b>Noticia5</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
</div>
<div class="alineacion">
<div><b>Noticia3</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
<div><b>Noticia6</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien.</div>
</div>
</div>
</body>
</html>

rascabuchitos · #5 (**permalink**) 26/12/2012, 16:43

hola IsaBelM
he intentado agregarle al ejemplo
http://webdeveloper.pe/1/
un reloj regresivo
http://webdeveloper.pe/2/
y la pagina se me pierde :(

algun consejo?

Gracias