HTML - como hacer efecto parallax?

Pos: 553

Val: 1

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 7

Val: 247

como hacer efecto parallax?

Publicado por Alejandro (100 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 clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 22

Val: 57

como hacer efecto parallax?

Publicado por Joan (15 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

Comentar

Pos: 320

Val: 4

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.

<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.

parallaxUno.rar(104,4 KB)

Valora esta respuesta

Comentar