Hola a todos, buscando como hacer un banner similar al de semantic-ui donde el fondo se mueve, encontré un buen ejemplo y lo quiero compartir por si alguien lo quiere implementar
El blog donde lo encontré es CSS-TRICKS donde tienen varias cosas interesantes, implementé un ejemplo que se adapta bien a lo que buscaba
No hay mucho que hacer para hacerlo funcionar en nuestro proyecto, en el css podemos cambiar las rutas de las imágenes que se moverán en el fondo si es que estamos ocupando un framework o no coincide con nuestros nombres de carpeta
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#background { background: url(../images/background.png) repeat 5% 5%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; } #midground { background: url(../images/midground.png) repeat 20% 20%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; } #foreground { background: url(../images/foreground.png) repeat 90% 110%; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; height: 100%; } |
En el trozo de código anterior aparecen tres referencias a id, pero en mi modificación sólo ocupo uno, además que hay que tener precaución con las etiquetas para que no se modifique el diseño original del proyecto. En el archivo index hay un id=“foreground” (que es el que ocupo) donde pongo el contenido del banner.
Abajo dejo los links de descarga y el ejemplo funcionando, si encuentran archivos de más es porque tomo el ejemplo de mi trabajo en curso, espero que les interese
Archivos originales (por si las moscas)
Descarga de mis archivos modificados
