javascript - sirve - title html

¿Cómo obtener la parte central(que funciona el truco) del trabajo de paralaje?

Question

Intenté experimentar con paralaje y comencé desde cero para comprender las partes centrales de esta magia. Para darte un ejemplo que me gusta usar como inspiración, puedes verlo en este enlace aquí en la sección "Fotos".

El último código está en la página con información relacionada. Para obtener una visión general de la pregunta, consulte el resto de los detalles.

Las partes principales que ya conozco son el scrollTop() de la $window y el offsetTop del elemento son importantes para aplicar el efecto de paralaje en un elemento DOM, así como un factor de cuán sensible debe ser el efecto a la velocidad de desplazamiento. El resultado final debe ser una fórmula que calculará las coordenadas de translateY o translate3d en píxeles o porcentaje.

Leí en Internet que la translate propiedad CSS es más rápida que, por ejemplo, top from position: absolute , y mi preferencia sería usar también translate en combinación con TweenMax GSAP . Así que el movimiento del paralaje será muy suave. Pero si solo la translate propiedad css es suficiente también está bien. Vi algunos ejemplos en los que utilizaba TweenMax, por eso lo uso por ahora.

JS

He codificado las cosas básicas:

var win = $(window);
var el = $(''#daily .entry'').find(''figure'');

win.scroll(function() {
  var scrollTop = win.scrollTop();
  var parallaxFactor = 5;

  el.each(function() {
    var image = $(this).find(''img'');
    var offsetTop = $(this).offset().top;

    // This is the part where I am talking about. 
    // Here should be the magic happen...

  });
});

Así que he codificado el código anterior, pero no hace nada, por supuesto. Ver CodePen del código anterior aquí . Solo consola de registro scrollTop y offsetTop . Como se mencionó anteriormente, solo conozco las partes principales como scrollTop y offsetTop para aplicar el efecto de paralaje. Luego, debe crearse un área donde el efecto de paralaje se activará y sucederá, por lo que los cálculos solo se realizarán para los elementos dentro de la ventana con el fin de mantener el buen rendimiento. Después de eso, se deben realizar algunos cálculos, pero no se sabe exactamente qué o cómo lograrlo. Solo después de tener un número final, podría usarlo, por ejemplo, en TweenMax de Greensock, así:

TweenMax

TweenMax.to(image, 0.1, {
    yPercent: offsetPercent + ''%'',
    ease: Linear.easeNone
});

Formula de paralaje

Si miro a mi alrededor para encontrar la fórmula, llegué a algo como esto (fundado en Internet):

var viewportOffset = scrollTop - offsetTop + win.height();
var offsetPercent = ((viewportOffset / win.height() * 100) - 100) / parallaxFactor;

if (viewportOffset >= 0 && viewportOffset <= win.height() * 2) {
    TweenMax.to(image, 0.1, {
        yPercent: offsetPercent + ''%'',
        ease: Linear.easeNone
    });
}

Pero si soy honesto, no sé qué hace exactamente esto, o por qué debería o podría ser así. Me gustaría saber esto, por lo que puedo entender todo el proceso de hacer que el paralaje ocurra. Las funciones de scrollTop() , offsetTop y $(window).height() están claras para mí, pero el truco detrás de la fórmula es la parte que no entiendo.

Actualizaciones

Actualización 1

@Scott ha notificado que el sitio de inspiración utiliza un complemento llamado scrollmagic.io , pero tengo mucha curiosidad acerca de cómo puedo crear un paralaje sin el uso de un complemento. Cómo funciona y cómo lograrlo. Con énfasis en la fórmula, por qué debo hacer esto o aquello y qué se calculará exactamente, porque no lo entiendo y realmente quiero saberlo, para poder usar este conocimiento en el futuro al aplicar un efecto de paralaje .

Actualización 2

El último día traté de averiguar qué hace exactamente el siguiente fragmento de código. Estoy hablando de esto:

var viewportOffset = scrollTop - offsetTop + win.height();

Después de algunas buenas sesiones de depuración, creo que tengo la pista. Así que scrollTop es la cantidad de píxeles que has desplazado hacia abajo en la página y que están ocultos de la vista. offsetTop es la posición de inicio del elemento dentro de DOM y $(window).height es la altura de la ventana $(window).height (la parte visible en el navegador).

Esto es lo que creo que hace esta fórmula:

Establezca el punto cero en el punto donde comienza el elemento. Por ejemplo, cuando scrollTop es igual a 0 y el elemento comienza a 240px desde la parte superior, entonces la fórmula es: 0 menos 240 es -240 . Así que la posición de desplazamiento actual está por debajo del punto cero. Después de desplazarse 240px hacia abajo, la fórmula generará 0 porque, por supuesto, 240 menos 240 es 0 (cero). Estoy en lo cierto

Pero la parte que aún no entiendo es por qué + win.height . Si volvemos a la fórmula anterior (en la Actualización 2) y scrollTop es cero, entonces $(window).height es el espacio desde 240px hasta la parte inferior de la ventana gráfica. Cuando se desplaza hacia abajo, la cantidad de píxeles crecerá en el desplazamiento, eso no tiene sentido para mí. Si alguien puede explicar cuál podría haber sido el propósito de esto, estaría bien. Soy muy curioso. La segunda parte de la fórmula para calcular el offsetPercent paralaje todavía no lo entiendo. En general el cálculo de la fuerza de paralaje en scroll.

Actualización 3/4

Aconsejado por @Edisoni, caminé los últimos días por los videos de Travis Neilson y me he vuelto mucho más inteligente sobre las funcionalidades básicas del paralaje. Una visita obligada para todo aquel que quiera cavar en paralaje. He usado el nuevo conocimiento sobre paralaje para obtener mi trabajo de script anterior:

var root = this;
var win = $(window);
var offset = 0;

var elements = $(''#daily .entry figure'');

if (win.width() >= 768) {
    win.scroll(function() {

        // Get current scroll position
        var scrollPos = win.scrollTop();
        console.log(scrollPos);

        elements.each(function(i) {
            var elem = $(this);
            var triggerElement = elem.offset().top;
            var elemHeight = elem.height();
            var animElem = elem.find(''img'');

            if (scrollPos > triggerElement - (elemHeight / 2) && scrollPos < triggerElement + elemHeight + (elemHeight / 2)) {
                // Do the magic
                TweenMax.to(animElem, 0.1, {
                    yPercent: -(scrollPos - elemHeight / 2) / 100, 
                    ease: Linear.easeNone
                });

            } else {
                return false;
            }

        });

    });

}

Sin embargo, el guión funciona solo para una cierta parte de los elementos y espero que alguien pueda ayudarme con esto. El problema es que solo funciona para los dos primeros elementos. Tengo la sospecha de que el "error" se encuentra particularmente después de que AND && sesión en la declaración if, pero no se puede resolver el error. http://codepen.io/anon/pen/XKwBAB

Cuando los elementos, que funcionan en el activador están animados, saltarán algunos píxeles hacia abajo, no sé cómo arreglar esto. El salto a: 1.135% , después de disparar el gatillo. Así que no empieza en 0%. Ya verifiqué si debería agregar la propiedad CSS translate al CSS y establecer el tipo de número en % , pero esto no funciona para mí.

-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);

¿Debo usar la función TweenMax .fromTo() lugar de usar la función .to() para poder establecer la posición de inicio o mi pensamiento sobre esto es incorrecto y tiene una causa diferente?

Algo como esto:

TweenMax.fromTo(animElem, 0.1, {
    yPercent: triggerElement,
    z: 1
}, {
    yPercent: -(scrollPos - elemHeight / 2) / 100,
    ease: Linear.easeNone
});

Además, estoy intentando recrear el efecto del sitio que me gustaría usar como fuente de inspiración sin el uso del complemento scrollMagic, pero no sé cómo funciona esto, con el uso de dos objetos diferentes que están animados.

Por fin, si alguien piensa que el código puede tener un mejor formato, no lo dude, me gustaría escuchar sus sugerencias.

Mis preguntas reales son para la actualización 2 y 3/4:

1. ¿Cómo calcular las coordenadas de paralaje para obtener "la magia"?
2. ¿Tengo razón acerca de la actualización 2, que el punto cero se restablecerá a offsetTop de cada elemento?
3. ¿Por qué mi código solo funciona para los dos primeros elementos y por qué saltan algunos píxeles hacia abajo si el estilo en línea de translate se agregará al elemento animado? Ver actualización 3/4 para toda la información.

Answer 1

Esto no es una respuesta de cómo construir un paralaje en JS. Pero muestra algunos conceptos básicos, que a menudo se olvidarán, si es demasiado en el código.

Lo esencial:

1. Ordene sus objetos gráficos en z-capas. Cuanto más alta es la z, más cerca está el observador frente a la pantalla.
2. Cuanto más alto esté su objeto en el eje z, más rápido debería moverse sobre algo que aparece, por ejemplo, su desplazamiento
3. Ahora obtienes un efecto 3D donde los objetos más cercanos a ti se mueven más rápido a tus acciones como objetos más alejados.

Tu pregunta

¿Cómo calcular las coordenadas de paralaje para obtener "la magia"?

La posición y depende de su índice z. Si está lejos, también conocido como el índice z es bajo, delta-y es pequeño. Si está demasiado cerca de ti, delta-y es grande. Por favor, tenga en cuenta que el índice z no se utiliza necesariamente como propiedad de estilo, es más como parece. Yo agregaría un atributo como data-z a cada capa de paralaje.

function parallaxingY(el){
   //el is a parallaxing element with attribute data-z
   return $(el).data(''z'')*window.scrollTop;
}

La solución CSS sugerida es buena y debería preferirse. Allí, la "magia", el "índice z", se crea mediante la "escala" de estilo css.

Answer 2

La paralaje es bastante simple en principio. Simplemente haga que el elemento de paralaje se desplace más lento que el resto del contenido. Dicho esto, una implementación de paralaje puede ser tan simple como dividir la distancia de desplazamiento por un factor:

var parallaxFactor = 3;
window.addEventListener("scroll", function(e){
    el.style.top = (document.body.scrollTop / parallaxFactor) + "px"; 
    // This is the magic. This positions the element''s y-cord based off of the page scroll
}, false);

CODEPEN

Esta es una demostración extremadamente simple del efecto de paralaje. Otras implementaciones más completas pueden manejar valores como porcentajes, o intentar suavizar la animación con TweenMax. Esta sin embargo, es la magia que estás buscando.

Vivir mucho y prosperar.

Actualizar:

Este ejemplo solo funciona para elementos en la parte superior de una pantalla. Si esto fuera por un propósito más general, querría almacenar la posición y predeterminada del elemento, luego algo en la línea de defaultYCord + (document.body.scrollTop / parallaxFactor) .

Actualización 2:

Keith Clark hizo una muy buena visualización del paralaje que hizo un scroller de paralaje css puro: http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/ . Si hace clic en depurar en la parte superior izquierda, le da una buena vista en 3D de la magia.