Header aleatorio con vanilla javascript

imagen aleatoria con vanilla javascript background random

Demostración

En esta ocasión, he escrito un pequeño código de fondo aleatorio, imagen aleatoria o random background en vanilla js, es compatible con cualquier navegador y versión, aunque no hace falta que lo sea, pero al menos por ese lado no habrá de que preocuparse.


Instalación

En este aporte se sobreentiende que ya cuentas con un header o algo similar y lo único que deseas es que la imagen "cover" sea aleatoria cada vez que el usuario refresque la pagina.


Este aporte sirve para cualquier página, solo tomare como referencia blogger. Ve a Temas, Personalizar, opciones avanzadas, CSS Personalizado y agrega el siguiente código:


/*!
* Random background
* by zkreations
*/
.headCover__random {
    background-size: cover;
    background: rgba(0,0,0,.5); /*color del fondo*/
    background-position: center top; /*posicion del fondo*/
}
.headCover__random,
.headCover__random--img {
    width: 100%;
}

Ya tenemos el código css que se encargará de que nuestros fondos mantengan una buena posición. Ahora vamos a ir a Temas, presionamos el botón "Editar HTML" y buscamos </body>, arriba de eso pegamos lo siguiente:


<script>//<![CDATA[
//! Random background | by zkreations
var fondos = [
  "https://i.imgur.com/OQRarsN.jpg", 
  "https://i.imgur.com/DUyPrOo.jpg", 
  "https://i.imgur.com/CAOj6VR.jpg"],
  random = Math.floor(Math.random() * fondos.length),
  image = document.querySelector(".headCover__random--img"),
  background = document.querySelector(".headCover__random");
  if(background !== null){
    background.style.backgroundImage = "url(" + fondos[random] + ")";
  }else{
    image.src = fondos[random];
  }
//]]></script>

Lo importante del código anterior es reemplazar los fondos que especifiqué por los suyos. Si deseas agregar más fondos simplemente duplica el código de la primera imagen tantas veces como sea necesario. Ejemplo:


var fondos = [
  "nueva-imagen-3.jpg", 
  "nueva-imagen-2.jpg", 
  "nueva-imagen-1.jpg", 
  "https://i.imgur.com/OQRarsN.jpg", 
  "https://i.imgur.com/DUyPrOo.jpg", 
  "https://i.imgur.com/CAOj6VR.jpg"],

Por último solo necesitamos especificar el elemento al cual afectará javascript. para ello buscan su propio header y le agregan la class headCover__random. Ejemplo:


<div class='myHeader headCover__random'></div>

En el código anterior estoy simulando un header con la clase "myHeader" y lo único que hice fue agregar la class headCover__random mediante un espacio.


Etiqueta IMG aleatoria

Además de agregar un fondo aleatorio mediante estilos, también se puede utilizar una etiqueta <img/>. Para ello agrega la siguiente etiqueta de imagen en donde desees el fondo aleatorio:


<img class='headCover__random--img' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>

A esa etiqueta le he especificado la clase "headerCover__random--img" y además le he agregado una imagen transparente de 1px mediante base64, de esa forma no cargamos imagenes por gusto y evitamos también tener la etiqueta vacia.


Recomendaciones

Puedes agregar tantos headers como quieras, pero recomiendo no agregar demasiados, porque para tus usuarios no sería bueno tener que descargar imagenes nuevas cada vez que te visiten. Tambien recomiendo comprimir tus imágenes sin perder calidad, de esa forma tendrás headers bonitos y facil de "digerir" para tus visitantes.


Eso a sido todo amigos. Si les ha resultado de utilidad no olviden compartir la entrada, de esa forma ayudarás a mas personas y yo lo agradeceré siempre. Que estén bien y feliz año nuevo.