Hacer Pregunta

Conecta

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?

preguntó
Web
1257 Vistas
4 Respuestas
abierta

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

por kiokotzu (1.960 puntos) en Web

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

por elias_leyton (2.260 puntos)

0voto

Peter comentado

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

por Peter (150.480 puntos)

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

por kiokotzu (1.960 puntos)

0voto

Peter Puntos150480

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.

por Peter (150.480 puntos)

3votos

Peter Puntos150480

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.

por Peter (150.480 puntos)

0voto

kiokotzu comentado

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

por kiokotzu (1.960 puntos)

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.

por Peter (150.480 puntos)

-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 javiermadueno (390 puntos)

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

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

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

Etiquetas

Categorías

Conecta