1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Efecto parallax solo con Javascript

Tema en 'Tutoriales de Javascript' comenzado por gammafp, 14 de Febrero de 2015.

  1. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    782
    Me gusta recibidos:
    344
    Puntos de trofeos:
    63
    Género:
    Hombre
    Muchos diran: ¿acaso odias jquery? eres un anticuado que solo usa javascript para tus proyectos mejor vete a chingar a la madre, y si fuese español digiese: oye tio me gusta jquery mas que javascript vete a tomar por c..o.
    A esto os digo: para que usar una libreria (framework) para obtener el mismo resultado y con las mismas lineas de codigo? pues para eso te ahorras la librería y obtienes el mismo resultado solo con JavaScript.

    Para este tutorial le doy las gracias a FalconMaster los créditos son para él ya que me inspiro para hacerlo solo con javascript.

    Bueno empecemos, en internet buscamos una imagen de mas de 2000 px de ancho y mas de 1600 px de largo claro mientras mas grande mejor.
    Procedemos a crear nuestro bosque de carpetas, una parea imagenes y otra para css y otra para javascript la podéis llamar como querrais, o si simplemente queréis podéis hacerlo todo en el mismo documento como os salga del corazon
    para el html solo necesitamos algo con muchos parrafos algo así:
    HTML:
    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>parallax</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nihil aliquam, et pariatur molestias delectus autem quasi error est veniam alias quisquam eum aliquid quibusdam cupiditate, natus totam voluptatem. Quidem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nihil aliquam, et pariatur molestias delectus autem quasi error est veniam alias quisquam eum aliquid quibusdam cupiditate, natus totam voluptatem. Quidem?
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nihil aliquam, et pariatur molestias delectus autem quasi error est veniam alias quisquam eum aliquid quibusdam cupiditate, natus totam voluptatem. Quidem?
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nihil aliquam, et pariatur molestias delectus autem quasi error est veniam alias quisquam eum aliquid quibusdam cupiditate, natus totam voluptatem. Quidem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nihil aliquam, et pariatur molestias delectus autem quasi error est veniam alias quisquam eum aliquid quibusdam cupiditate, natus totam voluptatem. Quidem?
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nihil aliquam, et pariatur molestias delectus autem quasi error est veniam alias quisquam eum aliquid quibusdam cupiditate, natus totam voluptatem. Quidem?
        </p>
    </body>
    </html>
    Luego de habernos currado el html hacemos la parte de CSS y ponemos un fondo en el body con background-image; acá os paso el codigo del css

    Código (Text):
            body{
                background-image:url('fondo.jpg');
                background-repeat: no-repeat;
                background-attachment: fixed;
            }
            p{
                width: 50%;
                margin: 50px auto;
                background-color: rgba(255,255,255, 0.7);
            }
    Y por último el codigo que hace la mágia, el codigo de javascript puro y duro, son dos lineas do nosso señor.

    Código (Text):
     window.addEventListener('load', inicializador, false);
            function inicializador(e){
               window.addEventListener('scroll', escroll, false);
            }
            function escroll(){
                var escroll=document.body.scrollTop;
                var posicion=escroll*0.10;
                document.body.style.backgroundPositionY='-'+posicion+'px';
            }
    Lo que hace el javascript desde la primera linea es: con window.addEventListener y pasandole el evento como load, es que cuando se carguen todos los elementos de la web se ejecutará la función inicializador.
    Una vez cargado el inicializador pillo el escroll con window.addEventListener('scroll', escroll, false);
    Una vez que se ejecute el escroll se ejecuta la funcion escroll() luego hay que pillar el valor del escroll y lo meto en la variable escroll se tiene que suar document.body.scrollTop;
    en la siguiente linea multiplico el escroll*0.10 y le aplico el resultado que se guarda en la variable posicion en el estilo del cuerpo con document.body.style.backgroundPositionY='-'+posicion+'px'; le paso el negativo para que suba lentamente la imagen.

    Y ale ahí tenéis el código para vuestro disfrute sano, recordad no bebáis mucho y protegeros que hoy es el día del amor y la amistad. Saludos.
    para muestra un boton: http://gyazo.com/e0c1382e2a074a2867e463e6ffcfb29d
    Ptt: agreguen mas lorem ipsum para que puedan hacer scroll, el post no me deja subir mas de 1000 palabras y si pongo todos los lorem ipsum se me peta el foro.
     
    Última modificación: 14 de Febrero de 2015
    A danielnavram le gusta esto.
  2. AyuukJaay

    AyuukJaay Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    149
    Me gusta recibidos:
    69
    Puntos de trofeos:
    28
    Género:
    Hombre
    Página web:
    Excelente compañero, yo tambien prefiero vanilla js hoy en dia ya es muy poderoso.
    Saludos
     

Comparte esta página