Efecto de paralaje, desplazamiento de miniaturas y apertura de ventana secuencial

Este tutorial explicará varias técnicas tales como Efecto de paralaje, desplazamiento de miniaturas y apertura de ventana secuencial detrás de Rleonardi.com. Con fines de aprendizaje, este tutorial solo se centrará en los códigos muy importantes para lograr esas técnicas.

Los códigos de este tutorial también serán versiones simplificadas de los originales. Se eliminarán las variables y funciones no relacionadas de las técnicas discutidas.

[tut demo=”http://www.rleonardi.com/tutorial-animation/script/contentAnimation.js” download=”http://www.rleonardi.com/tutorial-animation/css/contentAnimation.css”]

1. Efecto de paralaje en el movimiento del mouse

Primero, todas las imágenes y sus datos se almacenarán en una matriz llamada objectArray.

Imagen 1.0

var objectArray = new Array();
fillObjectArray(); 

function fillObjectArray() { 
var birdDiv = document.getElementById("bird"); 
var birdX = 312; 
var birdY = 33; 
var birdFactor = 0.05; 
var birdArray = new Array(); 
birdArray.push(birdDiv, birdX, birdY, birdFactor); 
objectArray.push(birdArray); 

var bush1Div = document.getElementById("bush1"); 
var bush1X = -28; 
var bush1Y = 352; 
var bush1Factor = 0.06; 
var bush1Array = new Array(); 
bush1Array.push(bush1Div, bush1X, bush1Y, bush1Factor); 
objectArray.push(bush1Array); 

...
}

//object array after fillObjectArray() function is executed 

objectArray[0][0] = birdDiv; 
objectArray[0][1] = 312; 
objectArray[0][2] = 33; 
objectArray[0][3] = 0.05; 

objectArray[1][0] = bush1Div; 
objectArray[1][1] = -28; 
objectArray[1][2] = 352; 
objectArray[1][3] = 0.06; 

...

El siguiente código es el motor de este efecto de paralaje. tempX es la posición x del ratón. windowWidth es un ancho interno para la ventana del navegador del usuario. matriz de objetos[i][3] es el número del factor de paralaje. Cuanto mayor sea este número, mayor será el efecto de paralaje en el movimiento del mouse.

Los objetos en primer plano, como la serpiente y el calamar, tienen un objectArray más grande[i][3] valores en comparación con objetos de fondo como la isla voladora y el pájaro. matriz de objetos[i][1] es la posición x original de la imagen antes de que se desplace. En el movimiento del mouse, objectArray[i][1] el valor será reducido o agregado por objectArray[i][3] * (0.5 * ancho de ventana – tempX).

Esta matriz de objetos[i][3] * (0.5 * windowWidth – tempX) significa que el número del factor de paralaje se multiplica por la distancia x del mouse desde el centro de la ventana del navegador. Luego, este valor se almacenará en yourDivPositionX, y yourDivPositionX se usará para actualizar la posición x de las imágenes. Dado que esta función se aplica a cada imagen dentro de objectArray, todas esas imágenes se desplazarán cada vez que el usuario mueva el mouse.

Imagen 1.1

function moveDiv(tempX) {
    for (var i=0;i<objectArray.length;i++) { 
        var yourDivPositionX = objectArray[i][3] * (0.5 * windowWidth - tempX) + objectArray[i][1]; 
        objectArray[i][0].style.left = yourDivPositionX + "px";
    }
}

Ver JavaScript completo y Ver CSS completo.

2. Animación de desplazamiento de miniaturas

Imagen 2.0

Este código cambia el grupo de miniaturas:

thumbnailPaperContainerArray[i].style.left = thumbnailPaperContainerLeftEarlyPositionX + thumbnailPaperContainerShiftAmount + "px";

Imagen 2.1

thumbnailPaperContainerLeftEarlyPositionX es la posición x del grupo de miniaturas cuando todavía está oculto. Cuando el mouse se desplaza hacia abajo, la posición y de la página web se calcula y se transfiere a thumbnailPaperContainerShiftAmount, y esto hace que thumbnailPaperContainerArray[i] desplazar horizontalmente. Cuanto más alta sea la posición vertical de thumbnailPaperContainerArray[i], mayor será el valor de thumbnailPaperContainerShiftAmount.

Imagen 2.2

La ecuación de thumbnailPaperContainerShiftAmount:

var thumbnailPaperContainerShiftAmount = (verticalPosition + windowHeight - contentThumbnailPaperDiv.offsetTop - thumbnailPaperContainerArray[i].offsetTop) * thumbnailPaperContainerShiftSpeed;

Nuevamente, este código solo calcula y transfiere la posición vertical de la página web a thumbnailPaperContainerShiftAmount. verticalPosition es la posición y de la página web. windowHeight es una altura interior de la ventana del navegador. contentThumbnailPaperDiv.offsetTop es la posición y del grupo de miniaturas container.thumbnailPaperContainerArray[i].offsetTop es la posición y de cada grupo de miniaturas. Y finalmente thumbnailPaperContainerShiftSpeed ​​es un número de factor. Cuanto mayor sea este número, mayor será thumbnailPaperContainerShiftAmount. En este ejemplo, thumbnailPaperContainerShiftSpeed ​​se establece en 2.

Cuando thumbnailPaperContainerArray[i] está en el medio de la ventana del navegador, thumbnailPaperContainerArray[i] debe bloquearse para que no siga desplazándose horizontalmente.

Imagen 2.3

 
if (thumbnailPaperContainerLeftEarlyPositionX + thumbnailPaperContainerShiftAmount > 0.5 * (windowWidth - thumbnailPaperContainerArray[0].offsetWidth)) { 
    thumbnailPaperContainerArray[i].style.left = 0.5 * (windowWidth - thumbnailPaperContainerArray[i].offsetWidth) + "px";
}

thumbnailPaperContainerLeftEarlyPositionX + thumbnailPaperContainerShiftAmount es la posición x dethumbnailPaperContainerArray[i] cuando el usuario desplaza el ratón. 0.5 * (ancho de ventana – miniaturaPaperContainerArray[0].offsetWidth) es la posición x cuando thumbnailPaperContainerArray[i] exactamente en el centro de la ventana del navegador del usuario. windowWidth es un ancho interior de la ventana del navegador y thumbnailPaperContainerArray[0].offsetWideste es el ancho del primer grupo de miniaturas. Este código básicamente dice que si algún grupo de miniaturas se mueve más allá del medio de la ventana del navegador, vuelva a colocarlo en el medio.

Ver JavaScript completo y Ver CSS completo

3. Animación de apertura de ventana secuencial

La animación de la ventana de apertura se crea utilizando esta imagen de ventana secuencial. Es una imagen larga que se desplaza horizontalmente para crear una ilusión de ventana que se abre.

Imagen 3.0

Hay 7 diapositivas de ventanas que se abren, y cada una de ellas tiene el mismo ancho. Entonces, cuando sea el momento de cambiar a la siguiente diapositiva de ventana, la posición horizontal de esta imagen de ventana secuencial se agregará o reducirá en . El tiempo para cambiar la diapositiva de la siguiente ventana se activa al desplazar el mouse.

Imagen 3.1

Imagen 3.2

Imagen 3.2. explicará el concepto de esta animación de apertura de ventana. Primero, preste atención a contentThumbnailWindowDiv.offsetTop. Su posición y es la misma que la de la miniatura de la primera ventana y se dibuja con una línea roja continua. Cuando el usuario se desplaza por la página, esta línea se moverá a diferentes áreas marcadas entre líneas de puntos.

Esta línea contentThumbnailWindowDiv.offsetTop está arriba límite para iniciar ventana abierta 6. Significa que la miniatura de la sexta ventana cambiará su imagen de ventana secuencial (imagen 3.1.) a la diapositiva número 2, que muestra solo una ventana pequeña que se abre.

Para la miniatura de la primera ventana, preste atención a contentThumbnailWindowDiv.offsetTop y límite para iniciar la ventana abierta 1. Hay 6 líneas de puntos debajo de contentThumbnailWindowDiv.offsetTop hasta llegar a límite para iniciar la ventana abierta 1. Ya que límite para iniciar ventana abierta significa que la imagen de la ventana secuencial muestra la diapositiva número 2, 6 líneas de puntos debajo de contentThumbnailWindowDiv.offsetTop significa que la imagen de la ventana secuencial muestra la diapositiva número 7, que es una ventana completamente abierta.

Para la miniatura de la segunda ventana, hay 5 líneas de puntos debajo de contentThumbnailWindowDiv.offsetTop hasta llegar a límite para iniciar la ventana abierta 2. Significa que la imagen de la ventana secuencial muestra el número de diapositiva 6. Esto se aplicará a todas las siguientes miniaturas de la ventana para que cada una de ellas muestre su propio número de diapositiva de la imagen de la ventana secuencial.

Ahora vayamos al proceso de esta animación de ventana. El código detectará la posición y de la página web y su valor se almacenará en verticalPosition. Esta posición vertical se sumará y restará con algunas variables (windowHeight y limitToStartOpenWindowFromBottom), y su valor se comparará con la posición del contenedor de miniaturas de ventana o contentThumbnailWindowDiv.offsetTop con algún ajuste. Hay 7 condicionales ya que hay 7 diapositivas de imagen de ventana secuencial, por lo que cada condicional estará representado por una diapositiva de imagen.

Imagen 3.3

Este es el primero de siete condicionales. Si verticalPosition + windowHeight – limitToStartOpenWindowFromBottom cae dentro de esta categoría, que es menor que (i + 1) * scrollGap + contentThumbnailWindowDiv.offsetTop), entonces la ventana debe estar cerrada. Para el panel de ventana izquierdo (windowLeftOpeningArray[i]), esto se hace con windowLeftOpeningArray[i].style.left = “0px”, ya que la imagen de la ventana secuencial más a la izquierda muestra una ventana cerrada.

//opening window image show slide 1 
if (verticalPosition + windowHeight - limitToStartOpenWindowFromBottom < (i + 1) * scrollGap + contentThumbnailWindowDiv.offsetTop) { 
    windowLeftOpeningArray[i].style.left = "0px";
    windowRightOpeningArray[i].style.left = earlyWindowRightPositionX + "px";
}

Los condicionales del segundo al sexto tienen una estructura de código muy similar, por lo que se combinarán junto con el ciclo for (var j=1; j. Para el panel de la ventana izquierda (windowLeftOpeningArray[i]), el segundo condicional mostrará una ventana casi cerrada, y el sexto condicional mostrará una ventana casi abierta (imagen 3.1.). Cada ofverticalPosition + windowHeight – limitToStartOpenWindowFromBottom se probará con 2 valores. El límite superior es (i + j + 1) * scrollGap + contentThumbnailWindowDiv.offsetTop), y el límite inferior es (i + j) * scrollGap + contentThumbnailWindowDiv.offsetTop. Luego, la imagen de la ventana secuencial se desplazará a su posición con windowLeftOpeningArray[i].style.left = (-j * slide_width) + “px”. Esto hará que la ventana cambie su apariencia de casi cerrada a completamente abierta.

//opening window image show slide 2 - 6 
for (var j=1; j< 6; j++) { 
    if ((verticalPosition + windowHeight - limitToStartOpenWindowFromBottom >= (i + j) * scrollGap + contentThumbnailWindowDiv.offsetTop) && (verticalPosition + windowHeight - limitToStartOpenWindowFromBottom < (i + j + 1) * scrollGap + contentThumbnailWindowDiv.offsetTop)) { 
    windowLeftOpeningArray[i].style.left = (-j * slide_width) + "px"; 
    windowRightOpeningArray[i].style.left = earlyWindowRightPositionX + (j * slide_width) + "px";
    } 
}

Este será el último condicional, si verticalPosition + windowHeight – limitToStartOpenWindowFromBottom es mayor que (i + 6) * scrollGap + contentThumbnailWindowDiv.offsetTop), entonces la imagen de ventana secuencial se desplazará a la diapositiva número 7. Esta diapositiva muestra una imagen de ventana completamente abierta . Para el panel de la ventana izquierda, esto se hace con windowLeftOpeningArray[i].style.left = (-6 * slide_width) + “px”.

//opening window image show slide 7 
if (verticalPosition + windowHeight - limitToStartOpenWindowFromBottom >= (i + 6) * scrollGap + contentThumbnailWindowDiv.offsetTop) { 
    windowLeftOpeningArray[i].style.left = (-6 * slide_width) + "px"; 
    windowRightOpeningArray[i].style.left = earlyWindowRightPositionX + (6 * slide_width) + "px"; 
}
[tut demo=”http://www.rleonardi.com/tutorial-animation/script/contentAnimation.js” download=”http://www.rleonardi.com/tutorial-animation/css/contentAnimation.css”]

Conclusión

Eso es todo, espero que hayan disfrutado leyendo este artículo tanto como yo disfruté escribiéndolo. También espero que este artículo sea útil para la comunidad de diseño y desarrollo. También puedes consultar el tutorial aquí.

0 Shares:
Te Recomendamos