Foros del Web » Programando para Internet » Jquery »

Efecto Paralmaxjs con múltiples imagenes

Estas en el tema de Efecto Paralmaxjs con múltiples imagenes en el foro de Jquery en Foros del Web. 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...
  #1 (permalink)  
Antiguo 25/07/2019, 10:04
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.134
Antigüedad: 15 años, 6 meses
Puntos: 9
Pregunta Efecto Paralmaxjs con múltiples imagenes

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
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 25/07/2019, 10:59
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.435
Antigüedad: 11 años, 5 meses
Puntos: 1065
Respuesta: Efecto Paralmaxjs con múltiples imagenes

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
  #3 (permalink)  
Antiguo 25/07/2019, 13:06
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.134
Antigüedad: 15 años, 6 meses
Puntos: 9
Respuesta: Efecto Paralmaxjs con múltiples imagenes

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?
__________________
Diseñador Gráfico publicitario

Última edición por ceaped; 25/07/2019 a las 13:15 Razón: Agregar texto
  #4 (permalink)  
Antiguo 25/07/2019, 18:17
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.435
Antigüedad: 11 años, 5 meses
Puntos: 1065
Respuesta: Efecto Paralmaxjs con múltiples imagenes

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:
Ver original
  1. let imagenes = [
  2.   'https://demo.com/imagen1.jpg',
  3.   'https://demo.com/imagen2.jpg',
  4.   'https://demo.com/imagen3.jpg',
  5.   'https://demo.com/imagen4.jpg',
  6.   'https://demo.com/imagen5.jpg'
  7. ], index_img = parseInt(Math.random() * 4);
  8.  
  9. console.log(imagenes[index_img]);

En PHP es casi lo mismo
Código PHP:
Ver original
  1. <?php
  2. $imagenes = [
  3.   'https://demo.com/imagen1.jpg',
  4.   'https://demo.com/imagen2.jpg',
  5.   'https://demo.com/imagen3.jpg',
  6.   'https://demo.com/imagen4.jpg',
  7.   'https://demo.com/imagen5.jpg'
  8. ];
  9.  
  10. ?>
  11. <img src="<?php echo $imagenes[rand(0,4)]?>" alt="">

En el caso de PHP el array puedes traerlo de la base de datos.
  #5 (permalink)  
Antiguo 26/07/2019, 11:46
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.134
Antigüedad: 15 años, 6 meses
Puntos: 9
Respuesta: Efecto Paralmaxjs con múltiples imagenes

Hola ArturoGallegos
Ok, gracias por toda tu ayuda
__________________
Diseñador Gráfico publicitario



La zona horaria es GMT -6. Ahora son las 00:50.