Los sitios web con Background Transition son sitios con una plantilla que en X cantidad de tiempo realiza un cambio del fondo del mismo sitio utilizando un efecto de Javascript y jquery, en este caso tenemos seis fondos diferentes que irán cambiando uno con otro.
Simplemente en nuestro index.html si queremos seguir adicionando imágenes, debemos hacerlo en:
|
1 2 |
// FONDOS CAMBIANTES: var images = ['./images/bg1.jpg','./images/bg2.jpg','./images/bg3.jpg','./images/bg4.jpg','./images/bg5.jpg','./images/bg6.jpg']; |
y también en:
|
1 2 3 |
<!-- IMAGENES DE FONDO --> <body onLoad="MM_preloadImages( ';./images/bg1.jpg';,';./images/bg2.jpg';,';./images/bg3.jpg';,';./images/bg4.jpg';,';./images/bg5.jpg';, ';./images/bg6.jpg';);" class="home page page-id-2 page-template page-template-Home-Page-php"> <!-- IMAGENES DE FONDO --> |
podemos encontrar en la carpeta “images” las imágenes de fondo.
Luego tenemos adicionalmente una caja flotante que podemos utilizar por ejemplo para publicidad:
Podemos ver un ejemplo de la plantilla con caja flotante en:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- CAJA FLOTANTE --> <div class="slogan" style="position:absolute;left:400px;top:85px;"> <div id="transparencybox" style="background-color:# FFFFFF;opacity:0.8;"></div> <div class="heading-box" style="color:#393738;"> <div id="headingbox"><div class="textwidget"><h2>Algo...</h2></div></div> <div class="subheading-box" id="subheadingbox"> <div>Algo mas...</div> <div class="find-more"><a href="http://www.nochesdecode.com.ar/"><img src="./images/find-more.png" /></a></div> </div> </div> </div> <!-- CAJA FLOTANTE --> |
