Efecto Paralmaxjs con múltiples imagenes

[ceaped]

Buenos días
Encontré este ejercicio:

https://codepen.io/jakezhong/pen/WEjYON

¿Cómo hacen para que cuando se cargue el navegador cambie las imágenes?

Gracias por su ayuda

[ArturoGallegos]

Porque ese afan de hacer parallax con jquery cuando se puede hacer con vanilla con menos código o hasta con puro CSS?

Respondiendo a tu pregunta, me imagino que te refieres a que cada que cargas la pagina ves imágenes distintas a la visita anterior.

eso es porque usan
http://www.unsplash.it/

Es un servicio de imágenes Dummy para cuando lanzas demos, si buscas algo para producción puedes crearlo tu mismo con php o con sql, solo hay que hacer un random de una matriz con urls o ids para devolver una imagen distinta en cada carga

[ceaped]

Hola ArturoGallegos
Me parece buena tu recomenación de utilizar "vanilla", voy a buscar sobre el tema para mirar bien el tema.

Con relación a mi pregunta ya comprendo entiendo, yo pensé que tenían un servidor con N fotos...jejeje...pero si la verdad me gustaría implementar ese tipo de fondos, que cuando se cargue el navegador cambie la imagen de fondo.

Te pregunto: sabes de algún tutorial que explique como hacer esto?

Gracias por tu ayuda

Nota: Cuando tu hablas de "vanilla" es hacer el efecto parallax sólo con HTML?

[ArturoGallegos]

Te comparto algo que tengo entre mis cuchitriles

Con vanilla me refería a javascript vanilla


También tienes la opción de hacerlo solo con HTML + CSS, aunque para este te recomiendo usar imágenes tipo patrones, que se pueda repetir una y otra vez

https://www.freepik.es/fotos-vectores-gratis/patrones

Esto, porque con CSS no puedes controlar la velocidad y si tu contenido es muy extenso necesitaras una imagen muy alta o una imagen pequeña que pueda repetirse N veces.


Sobre un tutorial por lo de las imagenes, realmente no te sabria indicar uno, pero valga que no necesitas mucho, hasta con javascript lo puedes hacer.
Todo lo que necesitas es tener una matriz de imagenes y usar un random

Código Javascript:

let imagenes = [
  'https://demo.com/imagen1.jpg',
  'https://demo.com/imagen2.jpg',
  'https://demo.com/imagen3.jpg',
  'https://demo.com/imagen4.jpg',
  'https://demo.com/imagen5.jpg'
], index_img = parseInt(Math.random() * 4);
 
console.log(imagenes[index_img]);
 

En PHP es casi lo mismo

Código PHP:

<?php
$imagenes = [
  'https://demo.com/imagen1.jpg',
  'https://demo.com/imagen2.jpg',
  'https://demo.com/imagen3.jpg',
  'https://demo.com/imagen4.jpg',
  'https://demo.com/imagen5.jpg'
];
 
?>
<img src="<?php echo $imagenes[rand(0,4)]?>" alt="">
 

En el caso de PHP el array puedes traerlo de la base de datos.

[ceaped]

Hola ArturoGallegos
Ok, gracias por toda tu ayuda