HTML - como hacer efecto parallax?

 
Vista:
sin imagen de perfil
Val: 2
Ha aumentado su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

como hacer efecto parallax?

Publicado por MariNohemy (1 intervención) el 15/07/2019 16:44:55
Poner imágenes con textos flotantes
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 272
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

como hacer efecto parallax?

Publicado por Alejandro (72 intervenciones) el 15/07/2019 20:20:44
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
El buen ScripShow tiene algunos ejemplos en los Codigos Fuente.
Date una vuelta AQUÍ
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Joan
Val: 48
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

como hacer efecto parallax?

Publicado por Joan (11 intervenciones) el 15/07/2019 21:08:42
Acabo de publicar un ejemplo, en el que a medida que va bajando el scroll la imagen de fondo va subiendo...
https://www.lawebdelprogramador.com/codigo/JavaScript/5424-Ejemplo-parallax-subiendo-el-fondo-con-el-scroll.html

Es esto lo que necesitas?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de sebastian
Val: 6
Ha disminuido su posición en 13 puestos en HTML (en relación al último mes)
Gráfica de HTML

como hacer efecto parallax?

Publicado por sebastian (2 intervenciones) el 20/07/2019 18:34:01
La verdad es que hace poco pensé en lo mismo y leyendo por ahí comprendí que no se trata mas de hacer una diferencia en el desplazamiento de los elementos en la pantalla según el avance del scroll de la pantalla o del elemento que quieras.
Como hace un tiempo he intentando hacer los códigos mas bien re utilizables es que se me ocurrió una función para hacer esto.
Es un prototipo pero funciona bastante bien.... es necesario cargar algún archivo de jquery antes del código javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Parallax Uno</title>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div id="uno"></div>
    <div id="dos" >
      <p><span>Texto principal</span></p>
      <p><span>Texto arriba</span></p>
      <p><span>Texto abajo</span></p>
    </div>
    <div id="tres"></div>
 
    <style>
      *{margin: 0; padding: 0;}
      #uno {height: 50vw; width: 100%; background: none;}
      #dos {height: 30vw; width: 100%; background: url('3.jpg'); background-position: 0; background-size: cover; background-attachment: fixed;}
      #dos p {position: absolute; font-family: sans-serif;}
      #dos p:nth-child(1){font-size: 10vw; font-weight: bold; color: #fff; margin-left: 24vw; margin-top: 0;}
      #dos p:nth-child(2){font-size: 12vw; font-weight: bold; color: #fff; margin-left: 10vw; margin-top: -15vw; opacity: 0;}
      #dos p:nth-child(3){font-size: 12vw; font-weight: bold; color: #fff; margin-left: 32vw; margin-top: 26vw; opacity: 0;}
      #tres {height: 60vw; width: 100%; background: none;}
    </style>
    <script>
      $(window).scroll(function() {
        function scrollOpacity(ini,fin,val1,val2,mod)
        {
          var altoPan=$(window).width();
          var ini=(ini*altoPan)/1366;
          var fin=(fin*altoPan)/1366;
          var pos=$(window).scrollTop();
          var dif1=fin-ini;
          var dif2=val1-val2;
          var cam=dif2/dif1;
          if(pos<ini){var val=0}
          else if(pos>fin){
            var val=dif1*cam;
          }
          else {var val=cam*(pos-ini);}
            if(mod=='menor'){var valUlt=val1-val;}
            else{var valUlt=val1-val;}
 
          return valUlt;
        }
 
        $('#dos').css({'background-position':'0 '+scrollOpacity(0,1100,0,-100)+'vw'});
        $('#dos').css({'filter':'grayscale('+scrollOpacity(500,700,100,0)+'%)'});
        $('#dos p:nth-child(1)').css({'margin-top':scrollOpacity(0,1000,0,15)+'vw'});
        $('#dos p:nth-child(1)').css({'opacity':scrollOpacity(0,500,0,1)});
        $('#dos p:nth-child(1) span').css({'opacity':scrollOpacity(500,1100,1,0)});
        $('#dos p:nth-child(2)').css({'margin-top':scrollOpacity(300,1210,-15,30)+'vw'});
        $('#dos p:nth-child(2)').css({'opacity':scrollOpacity(500,600,0,0.5)});
        $('#dos p:nth-child(2) span').css({'opacity':scrollOpacity(700,1200,0.5,0)});
        $('#dos p:nth-child(3)').css({'margin-top':scrollOpacity(300,1210,35,-15)+'vw'});
        $('#dos p:nth-child(3)').css({'opacity':scrollOpacity(500,600,0,0.5)});
        $('#dos p:nth-child(3) span').css({'opacity':scrollOpacity(700,1200,0.5,0)});
 
      });
    </script>
  </body>
</html>


Ese es el codigo completo..... copialo en un archivo html y pruebalo..... adjuntare un archivo jquery para que lo pongas en la misma carpeta que el html y un imagen que debes tambien poner en la misma carpeta para que funcione.

La funcion es esta scrollOpacity(iniScroll,finScroll,iniCambio,finCambio);

El primer parámetro marca la posicion del scroll en pixeles donde se inicia el cambio, el segundo muestra la posicion final tambien en pixeles, el tercero indica el numero inicial a cambiar y el cuarto indica el numero final ya cambiado.

le puse opacity por que al principio pensaba cambiar solo eso pero llego a ser lo que es ahora que termino siendo bastante poderosa.

Cambia los valores y refresca la pantalla para ir entendiendo la función, los nombres de las variables son asi:

el codigo esta pensado para ser reponsive y considerando que una pantalla "normal" mida 1366 pixeles maximo de ancho y con esta formula :

var ini=(ini*altoPan)/1366;
var fin=(fin*altoPan)/1366;

se consigue cambiar de pixeles (px) a viewport width (vw) que es mucho mejor para el diseño responsive.

si quieres jugar con las definiciones puedes cambiar el "1366" por otro valor.


Si tienes dudas me avisas y espero te sirva un abrazo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar