2012-06-27 9 views
11

Yo soy la creación de un sitio web como este (diapositivas verticales casi):¿Es posible hacer un efecto de "complemento" al desplazarse?

http://mikelegacywebdesign.com/scrollpage_test/index.html

Lo único que busco hacer que no puedo entender es cómo hacer que el SNAP desplazándose hasta el punto donde el cambio de color es mientras se desplaza.

Por ejemplo, cuando se desplaza, llega a unos 50-100 px cerca de la parte superior del siguiente color al que se desplaza, sería bueno si eso se ajustara a ese punto, en lugar de simplemente continuar desplazándose, porque es difícil hacer que ese "marco" se alinee perfectamente. Depende del usuario desplazarse la cantidad perfecta para que estén viendo el fotograma completo, y no las piezas del fotograma anterior o siguiente en la secuencia.

Cualquiera que sepa si hay un plugin jQuery o algo así sería mi héroe.

Aquí está la página COMPLETA hasta el momento. Es codificación simple para obtener el efecto actual:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>Scrollpage Test</title> 

<style type="text/css"> 

    html, body { margin: 0; padding: 0; height: 100%; width: 100%; } 
    .container { height: 400%; width: 100%; } 
    .section { height: 35%; width: 100%; } 

    #section1 { background-color: #1d9ad7; } 
    #section2 { background-color: #c83e3d; } 
    #section3 { background-color: #75b946; } 
    #section4 { background-color: #f4be2f; } 

</style> 
</head> 
<body> 
<div class="container"> 
    <div class="section" id="section1"></div> 
    <div class="section" id="section2"></div> 
    <div class="section" id="section3"></div> 
    <div class="section" id="section4"></div> 
</div> 
</body> 
</html> 
+0

no han tenido la oportunidad de revisar todavía, pero estoy buscando lo mismo y encontré este http : //benoit.pointet.info/stuff/jquery-scrollsnap-plugin/ –

+0

Es posible que desee echar un vistazo a [fullPage.js] (http://alvarotrigo.com/fullPage/). – Alvaro

Respuesta

5

Sí, es possible. Sin embargo, su código es bastante horrible. Mientras anima scrollTop, querrá asegurarse de que se ignore la entrada de usuario adicional que normalmente conduce al desplazamiento. Eche un vistazo a este test-case para tener una idea acerca de cómo evitar que un usuario se desplace.

0

yo buscaba lo mismo hace por lo asked a similar question unas pocas semanas. Encontré un complemento llamado stellar.js que tenía la funcionalidad pero la demostración estaba en horizontal y no pude cambiar mi vida a vertical. De todos modos, alguien publicó una solución, que he editado para mousescroll en lugar de hacer clic en: http://jsfiddle.net/djsbaker/dxzk4/

En una nota del sitio, tuve problemas con que era bastante lento con enormes imágenes de fondo fijo. De hecho, muy laggy, pero estaba usando paralaje que no se combinaba bien.

2

usted puede conseguir el efecto deseado mediante el

scroll() jumpScroll() scrollBy() 

y un poco de su propio código.

Por ejemplo,

function jumpScroll() { 
    window.scroll(0,250); 
} 

¿Sería desplazarse a ese punto en la página

Cuestiones relacionadas