entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

como se hace este efecto con jquery?

hola comunidad buenas tardes,
quisiera saber si alguno de ustedes sabe como se realiza este efecto que tiene esta pagina.
al mover el scroll el contenido pasa por encima de la imagen y esa misma se queda quieta

http://sojournnetwork.com/

de ante mano muchas gracias

4 Respuestas

1voto

elias_leyton Puntos2260

El efecto se llama parallax, y no es mas que varios divs con fondos estaticos "fixed" en css, otros transparentes, se ordenan con la propiedad css z-index.

Busca parallax jquery, y saldran mucha cosas.

Saludos

0voto

Peter comentado

Pues respondiste antes sin darme cuenta :P Me ganaste por unos minutos en lo que veía ejemplos :D

0voto

kiokotzu comentado

no me podrías regalar un ejemplo en jsfiddle es que he buscado pero me parece mucho código para hacer solo ese efecto

0voto

Peter Puntos150460

El efecto se llama parallax y tiene algunas variaciones de uso. Si buscas jquery parallax en Google, vas a encontrar bastantes opciones y plugins para jQuery que puedes utilizar.

No te recomiendo ninguno porque no he trabajado nada con ellos para poder dar una opinión sobre cual puede ser el mejor, mas ligero, rápido y demás. Pero como información general, efecto parallax es lo que buscas.

Saludos.

3votos

Peter Puntos150460

Te pongo un ejemplo simple y limpio con CSS.

<!DOCTYPE html>
  <head>
    <title>Parallax</title>
    <style type="text/css">
    .contenedor {
      color: #ffffff;
      display: table;
      height: 400px;
      width: 100%;
      background: url(img/aquiunaimagen.jpg) no-repeat center center fixed black; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    .texto {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    .espacioparaquefuncione {height: 900px;}
    </style>
  </head>

  <body>
    <div class="contenedor">

      <div class="texto">
        <h1>Aquí el texto que quieres</h1>
      </div>
    </div>

    <div class="espacioparaquefuncione"></div>
  </body>
</html>

Espero que te sirva.

Saludos.

0voto

kiokotzu comentado

mucas gracias ya comprendo bien como se realiza el efecto (Y)

0voto

Peter comentado

De nada, no se si te sirva en CSS, pero creo que así evitas una carga extra y el resultado es el mismo.

Saludos.

-1voto

javiermadueno Puntos390

Yo diría que la página que has puesto como ejemplo no utiliza Parallax Scrolling. Son simplemente divs con background con position: fixed.
Se considera parallax scrolling cuando al hacer scroll con el ratón el background tambien se mueve pero a una velocidad diferente a la del div.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta