Desmitifiquemos el paralaje: aprende a crear páginas web interactivas con JavaScript

1. Por qué deberías tomar esta clase: Parallax es impresionante efecto 3D que puedes ver en toneladas de sitios web, juegos y aplicaciones. Es un deleite de interacción y atrae a la gente como locos. En esta clase, te voy a mostrar cómo codificar a mano tu propia experiencia de paralaje usando JavaScript. Puede parecer vudú y magia oscura, pero en realidad es bastante simple y enormemente gratificante. Mi nombre es Rich Armstrong y llevo haciendo que las cosas se muevan con código desde 2006. En esta clase, vamos paso a paso a través del paralaje consagrado experimentado al responder al movimiento del ratón y documenta los eventos de desplazamiento. La clase está repleta de videos teóricos y prácticos y al final, podrás sorprender a tus amigos y llevar vida y magia a tus proyectos web. Diseño la clase para alguien que sabe cómo moverse, HTML, CSS, y JavaScript. Severo afán por crear algunas interacciones de paralaje. Te veré en el siguiente video. 2. Paralaje explicado: Entonces, ¿cuál es exactamente el efecto de paralaje? Si has escuchado este término antes, lo que puede venir a la mente es un sitio web que haga que cosas se muevan a diferentes velocidades a medida que te desplazas. Este es un buen punto de partida. El efecto de paralaje es realmente una ilusión de profundidad que ocurre cuando dos o más objetos se mueven a velocidades diferentes pero relacionadas, haciéndonos creer que hay una distancia entre ellos, que hay profundidad. Un diccionario define paralaje como el desplazamiento aparente de un objeto observado debido al cambio en la posición del observador. Añadí el énfasis. En la vida real cuando nos movemos, todo a nuestro alrededor parece estar en movimiento y todo a diferentes velocidades. Piensa en cuando estás mirando por una ventana y un coche o un tren, o incluso mueve la cabeza o camina ahora mismo, puedes ver cómo las cosas parecen moverse a tu alrededor? Verás que las cosas que están más lejos parecen moverse a una velocidad más lenta y las cosas que están más cerca. Por supuesto que somos nosotros los que nos estamos moviendo. Esto puede parecerte bastante obvio para ti. Entonces la pregunta es, ¿cómo podemos replicar esto en un mundo digital cuando nuestras pantallas son realmente planas y sin profundidad alguna? Bueno, tenemos que crear una ilusión de profundidad. Tenemos que hacer creer a la gente que hay profundidad donde no hay. Llegamos a ser ilusionistas y magos. Esto es bastante guay, ¿verdad? Para crear la ilusión de paralaje de una manera sencilla. Podríamos hacer que las cosas se movieran a diferentes velocidades. Esto es lo que ofrece la animación, pero no tiene nada que ver con el observador. No está controlado por el usuario. No es interactivo. Donde realmente cobra vida el efecto Parallax es cuando los elementos se mueven en función de los movimientos de un usuario, como cuando se desplazan o cuando mueven el ratón o cuando inclinan su teléfono, y esto es en lo que vamos a estar metiendo en esta clase. 3. Cómo va a funcionar esta clase: Hay dos partes a esta clase, en realidad. El lado paralaje de las cosas y el lado codificador de las cosas. Vamos a estar machacando esos dos mundos juntos. Puedes tomar esta clase y aplicarla a cualquier lenguaje de codificación que te guste, pero lo estaremos haciendo en HTML, CSS, y JavaScript. ¿ Por qué? Porque es súper accesible, es súper divertido, y puedes hacer algunas cosas muy rápidamente con él. Esto significa que estaremos cubriendo muchos temas HTML, CSS, y JavaScript y cómo se relacionan entre sí, lo cual es fundamental para el diseño de interacciones en la web. En esta clase, hay tres cosas principales que vamos a cubrir. El primero es lo que me gusta llamar, insumos. Vamos a aprender a rastrear el movimiento del usuario y usarlo para informar cómo se mueven nuestros objetos en nuestra pantalla. El segundo es lo que me gusta llamar, salidas. Aquí es donde aprenderemos a manipular cómo se mueven nuestros objetos en base a nuestros insumos. El tercero es que vamos a aprender sobre el paralaje, que ya hemos hecho. Pero también vamos a aprender a utilizar las entradas y salidas para crear una experiencia interactiva de paralaje. Lo que es realmente importante es que aprendas a hacer estas experiencias de paralaje basadas en la teoría y no solo copiando código. Estaremos codificando a mano todo en esta clase y si hablas en serio en aprender mejor, te sugiero que escribas tu propio código a medida que avanzas. Aprendo mejor siguiendo, pausando el video cuando intento ligar con lo que acaban de decir o cuando quiero entender algo. Escribe tu propio código, prueba las cosas, rompe las cosas e incluso prueba las cosas antes de llegar a ellas. Grita si no entiendes nada o si tienes alguna pregunta en absoluto. Voy a utilizar un servicio en línea llamado CodePen para hacer toda mi codificación con en esta clase. Me gusta enseñar con él porque podemos ver el HTML, el CSS, y el JavaScript todo en un solo lugar y recarga la vista previa a medida que escribo. Te recomiendo que lo uses también. Es gratis, es fácil crear nuevos bolígrafos, desviarse de uno existente usando la funcionalidad de horquilla, y como ya está en línea, es realmente fácil de compartir. Lo que significa que si tienes algún problema, solo puedes compartir la URL conmigo y también significa que puedes compartir tu impresionante trabajo con otros estudiantes, con tu mamá y con cualquier otra persona. Lo único que no podrás hacer con la versión gratuita de CodePen es subir imágenes, pero eso se puede superar fácilmente y te mostraré cómo hacerlo más adelante en la clase. Si quieres escribir tu código en tu computadora sin embargo, usando tu editor de código, eso es totalmente genial. Te recomendaría usar Sublime Text, es mis favoritos o Visual Studio Code, está hecho por Microsoft. También usaría GitHub para hacer una copia de seguridad de su código y GitHub Pages para compartir. Eso es libre de. Si tienes tu propia página web, puedes subirla allí también. Entonces vámonos, vamos a divertirnos mucho. 4. Entradas y salidas: ¿ Cuáles son las entradas y salidas? Me gustaría ver los insumos como cosas que se pueden rastrear y responder. Entonces me gusta ver una salida como algo que podamos controlar. En un mundo de codificación, ayuda cuando una entrada tiene un rango. Significa que podemos rastrearlo mucho más fácil y luego responder en consecuencia. Piensa en un dial de horno. Tiene un valor mínimo y un máximo, o un valor inicial y un valor final. Estos valores corresponden a un rango de temperatura. Con código, podemos cambiar las propiedades del objeto en base a una entrada. Las que son las más divertidas y las más realistas, son las que el usuario tiene más control. En esta clase, vamos a estar trabajando con la posición del ratón del usuario y la posición de desplazamiento de documentos, como nuestro usuario entra. Entonces vamos a estar cambiando la posición del objeto en base a esta entrada. 5. Captura el movimiento del ratón: Empecemos. Lo que vamos a hacer en este video es terminar con dos valores de entrada que podemos usar para conectar nuestros valores de salida. Van a ser valores de fracción transmitiendo la posición X e Y del ratón. Estamos usando valores de fracción porque hará que sea fácil conectar nuestros valores de salida futuros a. Para obtener un valor de fracción, necesitamos obtener la posición actual del ratón y compararla con su posición máxima. Trabajaré con la posición X por ahora, pero lo mismo se aplica con la posición Y. La posición máxima en este caso será el ancho de las ventanas. Todo lo que necesitamos hacer es dividir la posición actual del ratón por la posición máxima. Es un cálculo bastante fácil. Pero esto supone que queremos rastrear el ratón desde el inicio de la ventana hasta el final de la ventana. ¿ Qué pasa si desea realizar un seguimiento de la posición del ratón desde 100 píxeles desde la izquierda hasta 200 píxeles desde la derecha. ¿ Cómo calculamos entonces el valor de la fracción? Apuntemos algunos valores. Queremos que el valor de fracción sea cero cuando la posición del ratón está en 100 píxeles y el valor de fracción sea uno cuando el ratón está en posición es que el ancho de las ventanas -200 píxeles. Necesitamos calcular el valor entre el valor final y los valores de inicio. Podemos hacer esto restando el valor inicial del valor final, que llamaremos a nuestro rango de entrada y luego cuando obtengamos nuestra posición actual del mouse, podemos restarle el valor inicial para negar el valor de las posiciones de inicio. Esto significa que si la posición de nuestro ratón es de 100 píxeles, realidad será cero en nuestro cálculo. Ahora, comparamos ese valor con nuestro rango para obtener un valor de fracción preciso. Usando este cálculo siempre obtendremos el valor de fracción correcto. El cálculo ahora es ligeramente diferente al anterior, pero también podemos usar este cálculo si queremos rastrear desde la izquierda de la ventana todo el camino hacia la derecha. Ahora puede estar preguntando qué pasa si la posición del ratón está entre cero y 100 píxeles? ¿ Qué tipo de valor de fracción obtendremos entonces? Obtendremos valores negativos y si la posición del ratón está más allá del valor final de las entradas, entonces el valor de fracción que obtendremos será mayor que uno. Estos valores serán realmente importantes más adelante pero por ahora, podríamos restringir los valores de fracción a valores que van entre cero y uno con un poco de código. Si necesitas un momento para digerir estos cálculos, te sugiero pausar el video aquí mismo y conseguir un bolígrafo y papel y trabajarlo por ti mismo. Hace un mundo de diferencia cuando realmente lo entiendes. Esa es la teoría de los insumos. Ahora, vamos a implementarlo en código. No tenemos ningún HTML hasta ahora, y eso es genial. Escribiremos un poco hacia el final del video y tengo un poco de CSS que he aplicado al cuerpo. Tiene un color de fondo y tiene un margen de cero. Tampoco escribiremos demasiado CSS así que vamos a cerrar eso por ahora. Empecemos a escribir algo de JavaScript. Voy a crear una variable llamada input, donde configuraré toda mi información de entrada y esto va a ser un objeto y dentro de este objeto vamos a decir que hay un objeto MouseX y un objeto MouseY. Esto contendrá toda la información para MouseX y para Mousey. Simplemente voy a trabajar con MouSex principalmente y luego al final del video, actualizaré todo para trabajar con Mousey también. Tenemos nuestra posición de inicio, solo vamos a poner esto en cero por ahora. Tenemos nuestra posición final, que va a ser el ancho de nuestra pantalla o el ancho de nuestra ventana. Entonces voy a decir window.innerwidth y luego voy a establecer mi valor actual en cero inicialmente y luego también necesito poner en mi rango, y necesito poner en mi valor de fracción. Voy a hacer esto fuera de esta configuración inicial para que también podamos actualizarlo más adelante. Input.Mousex.Range = entrada.Mousex.End - Input.Mousex.Start. El rango del MouseX es igual al final del MouseX menos el inicio del MouseX, que en este caso literalmente sólo será el valor final. Esto se parece mucho a ese cálculo inicial, pero actualizaremos la posición inicial y final, lo que hará que el rango sea mucho más útil. Entonces podemos calcular nuestro valor de fracción pero nuestro valor de fracción no va a ser mucho uso a menos que podamos calcular realmente la posición X e Y actual de nuestro ratón. ¿ Cómo hacemos eso en JavaScript? Bueno, tenemos estas cosas llamadas oyentes de eventos y podemos agregarlas a un montón de objetos diferentes. Uno de los objetos a los que podemos agregar un oyente de eventos es la ventana. Voy a decir window.adDevent oyener y esta función acepta un montón de argumentos o información diferentes que le podemos pasar. El primero que le podemos pasar es el tipo de eventos que queremos escuchar. Voy a escuchar los eventos de movimiento del ratón y luego lo que quiero pasar aquí es qué hacer cuando se producen los eventos de movimiento del ratón y esta es una función. Cuando se producen los eventos de movimiento del ratón, ejecuta el código dentro de esta función y por ahora, solo escribiremos console.log y nos aseguraremos de que deletreamos todo correctamente y diremos: “Trabajando”. Después abrimos nuestra consola, que es la consola CodePen, y movemos nuestro ratón y vemos que la consola tiene un montón de mensajes de trabajo entrando. Eso significa que está funcionando, lo cual es fantástico. Ahora bien, no quiero detener esta pieza de código por aquí porque esta es una función anónima, significa que no podemos acceder a ella fuera de los eventos de movimiento del ratón. Podría cortar esto y voy a almacenar esa pieza de código dentro de una variable llamada handle mouse move. También podría almacenarlo dentro de una función con nombre. Me gusta almacenar cosas dentro de variables. Ahí lo voy a pegar. Eso significa que puedo copiar y pegar esto y eso significa que cuando se producen los eventos de movimiento del ratón, lo que sucede todo el tiempo llamará a esta variable que luego ejecuta esta pieza de código. Fantástico. Si despejamos la consola y movemos nuestro ratón solo para duplicar comprobar que de hecho está funcionando. Ahora, lo siguiente que necesitamos lograr ya que necesitamos obtener el valor X del ratón o el valor Y del ratón. ¿Cómo hacemos esto? Bueno, en JavaScript, obtenemos este objeto de evento que se pasa a nuestra función. Podrías llamar a esto como quieras. Algunas personas van por E, Algunas personas van por EV. Si de verdad quisieras, podrías llamarlo Bob. A mí me gustan los eventos porque describía exactamente lo que es. En lugar de iniciar sesión, trabajar, voy a registrar mi evento y luego mis eventos objeto. El motivo por el que tengo evento en la cadena es que sé exactamente lo que estoy registrando en un momento dado. Si tienes un montón de registros de consola a lo largo de tu código y no tienes un indicador de lo que es puede llegar a ser realmente confuso. Despejemos nuestra consola y mueva nuestro ratón. CodePen dirá que se ha omitido el registro. Dirá que es demasiado grande para su consola y es posible que necesites usar la consola del navegador en su lugar. consola de CodePen no es tan poderosa. Entonces vamos a tener que usar la consola de Chrome en su lugar. Entonces vamos a View Developer y luego vamos por la consola JavaScript y vamos a mover nuestra consola un poco hacia abajo para que podamos mover nuestro ratón por aquí arriba. Ya verás que a medida que te desplazas hacia abajo en la consola de Chrome, hay un montón más de eventos que vienen a través. Veamos qué es este objeto de evento. Es un montón de claves y valores aquí. Vamos a hacer esto un poco más alto, así y tenemos LayerX, Layery, tenemos cliente X, cliente X. También tenemos offset X offset Y, PageX, PageY. Todos estos lucen realmente bien X e Y. También tenemos un montón de otra información pero me interesan más estos valores X e Y. Lo que me gustaría que hicieras es escoger uno de estos y ver si funciona. Voy a ir por el cliente X y el cliente Y, o tal vez PageX y PageY. Todos se ven realmente similares en este momento. Vamos a cerrar esto y vamos a registrar event.ClientsX y vamos a asegurarnos de que vaya allí para. Despeja nuestra consola aquí y muévete y estamos obteniendo algunos valores que parecen realmente prometedores. Entonces si vas todo el camino a la izquierda, deberíamos esperar un cero, que es y si vamos todo el camino a la derecha, deberíamos esperar un número bastante grande, 572. Ahora, podemos comprobar si este es en realidad el valor poniendo en window.innerwidth que es indefinido y eso porque deletreamos ancho con un I grande, 573. Esto es un poco sospechoso, ¿no crees? Bueno, por ahora vamos a trabajar con esto, está bastante bien. Ahora, tenemos a nuestro clientX lo que significa que en realidad podemos ir y actualizar nuestra entrada.mousex.Current que es igual a nuestro event.ClientX. Significa que también podemos actualizar nuestro valor de fracción. Entonces input.Mousex.Fracción igual. ¿ Puedes recordar cuál fue nuestro cálculo para esto? Bueno, es nuestra entrada.Mousex.Actual menos el valor de inicio. Vamos a poner esto dentro de algunos aparatos ortopédicos para que funcione eso primero. Entonces vamos a dividir eso por la entrada.Mousex.Range. Esta es una pieza bastante larga de código. Eso es sólo porque estamos siendo excesivamente verbosos al respecto, estamos diciendo input.mousex.actual. Eso es sólo para que ustedes sepan exactamente lo que está pasando con todos estos valores en un momento dado. Tenemos nuestro valor actual, tenemos nuestro valor de fracción. Bueno, veamos si esto realmente está funcionando. Vamos a cerrar sesión nuestro valor de fracción y entrada.Mousex.Fracción. Hagamos esto un poco más grande. Vamos de izquierda todo el camino a derecha. Eso es raro que se vaya a 1.36. ¿ Qué está pasando aquí? Bueno, tal vez hayas visto que redimensioné un poco mi pantalla. Yo siempre habría empezado en cero. Pero dependiendo del ancho de mi pantalla, podría llegar a un valor mucho más grande que uno. ¿ Qué está pasando aquí en realidad? Vamos, echa un vistazo a esto. Estamos almacenando nuestro valor final dentro de nuestro objeto, inicialmente. No se está actualizando cuando cambia el tamaño de la pantalla o la ventana. Tenemos que actualizar ese valor para que podamos actualizar algunos otros valores para que nos pueda dar un valor de fracción preciso. ¿Cómo hacemos esto? Bueno, esta pieza de código aquí. Voy a copiarlo y pegarlo. En lugar de escuchar un evento de mousemove, voy a escuchar un evento de cambio de tamaño. Entonces en lugar de llamar a la función HandleMouseMove, voy a llamar a la función HandleReSize. Entonces var HandleReSize y esto va a almacenar una función. Dentro de esta función vamos a actualizar nuestro código input.Mousex.End es igual, y va a ser exactamente igual a nuestro valor inicial. Ahí vamos. Debido a que nuestro valor final está actualizado, también necesitamos actualizar nuestro valor de rango porque hace uso del valor final. Eso debería manejar eso. A ver si funciona. Para despejar nuestra consola, vaya de izquierda a derecha. Casi llega a uno. 0.998, es casi uno. Vamos a trabajar con esto. Si cambiamos el tamaño de nuestro navegador 0-99, las cosas definitivamente están funcionando. Lo que necesitamos hacer ahora es comprobar que si nuestro valor de inicio está en 100 y algún otro valor, esto en realidad también funciona. Empecemos con nuestro valor de inicio y luego llegaremos a nuestro valor final después de eso. Lo que voy a hacer es, dentro de nuestro HTML, voy a crear un div con una clase de bloque. Estoy usando una cosa llamada Emmet que funciona en CodePen, Sublime Text y Visual Studio Code. Una vez que tienes esta abreviatura, solo tienes que pulsar “Tab” y la expande en algún código para ti. Tengo toda una clase en esto si quieres echarle un vistazo. Dentro de nuestro CSS, donde también trabaja Emmet, puedo ir.block. Voy a darle a esto un color de fondo y luego ir por un color que CodePen tiene. Vamos por este color verde. Vamos a copiarlo al portapapeles, vamos a pegarlo. Muchas gracias. Voy a establecer un ancho de 100 píxeles, y luego voy a establecer una altura de 100 altura del visor. Ahora tenemos esta gran pequeña barra verde. Eso van a ser 100 píxeles. Cuando despejemos esto, sabremos que cuando lleguemos a 100 píxeles, que es por ahí, debería ser cero, que parece que es. Ahora tenemos que poner nuestro final al interiorAncho menos 200. No olvides que también podemos simplemente copiar esto y pegarlo abajo donde actualizamos nuestro valor final. Bastante importante. Vamos a copiar y pegar esta pieza de código de bloque, llamémoslo block2. Dentro de nuestro CSS, haremos más o menos lo mismo para el block2. Esta vez le daremos un ancho de 200 píxeles, una altura de 100 altura del visor. Diremos posición absoluta, y diremos derecho, dale un valor de cero y un valor máximo de cero también. decir que está en el lado derecho. Si vamos a aquí, debería ser cero. Si vamos a aquí, debería ser uno, que es. Si vamos por encima de uno, va a ser un valor por encima de uno. Si vamos por debajo de cero, va a ser un valor por debajo de cero. Ahí vamos. Esto es exactamente lo que hemos querido de este video. Te voy a mostrar dos cosas más. El primero es que si no queremos que nuestros valores vayan por debajo de cero y por encima de uno, lo que podemos hacer aquí es que podemos decir. Si input.Mousex.Fracción es más grande que uno, entonces simplemente lo vamos a tapar a una. Si nuestro valor es menor que cero, también lo limitaremos a cero. Al igual que así. Entonces cerraremos la sesión de nuestro valor de fracción después de haber clavado esas dos cosas hacia abajo. Cuando vamos de izquierda a derecha, es cero, cero, cero, cero, cero, cero, cero. Después empieza a funcionar, llega a uno, y luego simplemente se queda en uno. Esa es una manera realmente fácil de asegurarnos de que nuestros valores van desde 0-1. Pero esos valores negativos y valores superiores uno van a ser realmente importantes en un video posterior. Ahora, lo siguiente es que tenemos nuestro valor y para trabajar. Lo que voy a hacer aquí es, voy a decir pausa el video y tú intentas trabajar tus valores y. Diviértete, haz algo de experimentación. Voy a subirme a mi valor y en sólo unos segundos. Hagamos nuestro valor y. Voy a cambiar mi inicio a cero otra vez y mi final a InnerWidth. Voy a bajar aquí y hacer lo mismo. Entonces voy a sacar mis dos cuadras porque realmente no las quiero. Voy a ir a mi HTML y sacar esas dos cuadras también. Ahora, vamos por nuestros valores y. Simplemente consigo copiar y pegar un montón de cosas diferentes aquí. En lugar de ir por ventana.InnerWidth, voy a ir por ventana.InnerHeight. Entonces voy a configurar mi gama Mousey, mi extremo Mousey, y mi inicio Mousey. Cuando digo manejar el mousemove, voy a copiar y pegar esto. Simplemente copiaremos y pegaremos el Mousey en todos estos lugares diferentes. Todo es prácticamente el mismo cálculo, el mismo algoritmo, sólo estamos cambiando valores. En lugar del evento de ClientX, voy a ir por el CLIENTY. No tenemos que usar esto si no queremos. Yo sólo voy a comentarlos. Voy a presionar “Comando” o “Control”, y “Slash” sólo voy a comentar esos fuera. Podemos ir por registrar la fracción X y la fracción Y, y cambiaremos esto a Mousey. Entonces, cuando manejemos nuestro retamaño, solo copiaremos y pegaremos esto de nuevo, y luego copiaremos y pegaremos nuestro Mousey y cambiaremos nuestro InnerWidth a InnerHeight. Esto debería funcionar técnicamente, así que vamos a volver a comprobar que sí. Nos vamos a ir todo el camino en la parte superior izquierda, debería estar bastante cerca de 0,0. Después vamos todo el camino a la derecha que debería estar bastante cerca de uno para el valor x, y luego comprobemos que nuestra y funcione. Voy a ir todo el camino hasta la cima. Ahí vamos, cero todo el camino hasta el fondo, lo que casi nos da uno. Pero por algunas razones con este navegador, no nos da del todo un valor de uno. Ahí vamos, tenemos valores de fracción tanto para nuestra posición de ratón X como Y. Esto significa que podemos enchufar algunos valores de salida en el siguiente video. Fantástico. 6. Conecta el movimiento del ratón con una salida: En este video, conectaremos nuestros valores de fracción de entrada que calculamos en el video anterior con algunos valores de salida. Lo que significa que llegamos a empezar a hacer que las cosas se muevan en base a la posición de nuestro ratón, que es super cool. Nuestra configuración de salida se verá bastante similar a nuestra configuración de entrada. Habrá un valor inicial y final así como un rango. Para calcular el valor de salida actual, tomaremos el valor de fracción de nuestra entrada y lo multiplicaremos por el rango de salida antes de agregarlo al valor de stock. O podríamos tomar ese valor y restarlo del valor final dependiendo de lo que quieras hacer con él. Ahora, esa es la teoría vamos a meternos en algún código. Nos vamos a divertir un poco ahora y hacer que algunos ojos googley se muevan por ahí cuando nuestro ratón se mueve. Va a ser genial. Dentro de mi HTML, voy a crear dos ojos. Entonces vamos por el ojo y la pupila interior, así y luego dentro de mi CSS, iré por.eye. Pondré un color de fondo de blanco y luego un ancho de digamos, 200 píxeles, una altura de 200 píxeles, un radio de borde del 50 por ciento porque queremos que sea redondo. Sí. Después una pausa A para absoluto, y luego diremos una izquierda del 50 por ciento. Bueno, gracias. Guardemos eso. la izquierda del 50 por ciento y diremos un margen a la izquierda de decir, menos 100 píxeles, justo eso está justo en el medio y luego podemos decir lo mismo para la parte superior del 50 por ciento y un margen superior de menos 100 píxeles también está ahí justo en el medio. Entonces pondremos aquí. pupill, y diremos que VGC es negro, diremos ancho de 50 píxeles, altura de 50 píxeles, radio border-50 por ciento, valor máximo de 50 por ciento. Podemos prácticamente simplemente copiar todo esto y en lugar de unos 100 píxeles, solo diríamos 25 píxeles. No se ve bien. Ahora, no se ve demasiado bien. ¿ Lo hace? Porque no hemos puesto una posición absoluta. Ahí vamos. Tenemos un globo ocular, tenemos una pupila, tenemos un ojo. Entonces ahora quiero otro ojo. Vamos por otro ojo. mejor llamaremos a este ojo 1 y a este ojo 2. Genial. Ojo 1 tendrá, digamos, un margen a la izquierda de menos 200 pixeles.ojo 2. No tengo tres ojos. Ojo 2, un margino-izquierdo, quizá puedas decir 0. Podemos conseguir esto un poco más de espacio. Entonces agreguemos 25 píxeles a eso y 25 píxeles a eso. Ahí vamos. Tenemos algunos ojos. Ahora, a medida que muevo el ratón de izquierda a derecha, quiero que los globos oculares de las pupilas sigan al ratón, o tal vez miren la otra dirección hacia donde va el ratón. Lo mismo con mi posición y. Hemos hecho nuestro HTML y CSS. Ahora vamos a entrar en algunos Javascripts. Hagamos estos paneles un poco más grandes. Por aquí, vamos a ir a crear nuestra configuración de salida. Esto se verá realmente familiar. Iremos por una configuración de x y una y, y x e y porque no es realmente ratón x y ratón y, realidad es la exposición x o una posición de traducción x y la posición de traducir y. Vamos por un valor de inicio, y diré menos 100 píxeles, excepto sin el px y el final, digamos, 100, la corriente será 0 y luego un rango, podríamos simplemente poner nuestro rango aquí de 200, pero nosotros crearemos dinámicamente eso después de que hayamos creado el objeto. Simplemente trabajaré con la posición x por ahora, y haré que hagas la posición y más adelante antes terminar y te enseñaré exactamente cómo haría la posición y. Entonces lo que va después de esto es nuestro output.x.range y este es nuestro output.x.end menos output.x.start. Fantástico. Simplemente voy a cortar y pegar los valores de entrada donde los codificadores de entrada y la salida donde los codificadores de salida. Eso tiene un poco más de sentido. También podemos empezar a contar solo los bits del codificador solo para que sepamos lo que está pasando. Fantástico. Entonces aquí abajo, probablemente ya no necesitemos esto a menos que vayas a hacer uso de un rango de entrada donde el inicio no es 0 y el final no es la ventana en un ancho. Entonces podemos simplemente picar eso y luego podemos hacer algunos comentarios más aquí. Entonces podemos hacer mouse x, podemos decir mouse y, o simplemente podemos llamar a ese mouse x input a mouse y input. Entonces tenemos algunos registros de consola sucediendo aquí, que solo comentaré por ahora. Ahora tenemos nuestras entradas ocurriendo. Hemos configurado nuestras salidas. Ahora bien, ¿cómo realmente convertimos o conectamos nuestras entradas a nuestras salidas? Salida, deletreemos eso correctamente, output.x.current es igual, y tenemos un valor de fracción con el que podemos trabajar. Entonces vamos a decir nuestro valor de fracción multiplicado por nuestra salida.x.range, que va a ser un valor en sí mismo. Entonces no tienes que hacer esto, pero a veces es un poco más fácil decirlo, vale, ese es un valor que va a funcionar primero, y luego vamos a decir output.x.start más ese valor. Ahora vamos a cerrar la sesión. A ver qué pasa. Todo listo. Si despejamos esto primero, estás todo el camino desde la izquierda, que es menos 100, todo el camino hacia la derecha, que es casi más 100. Bastante cool. Entonces esto está funcionando, nuestros valores de salida están llegando. Ahora solo necesitamos conectarlo al HTML. Pero, ¿cómo carajos hacemos esto? Todo hasta ahora ha sido simple codificación. Bueno, un poco de matemáticas, pero nada de HTML. ¿ Cómo conectamos realmente el HTML? En la parte superior de mi documento. Aquí es donde voy a configurar mi HTML. Por lo que configuración HTML. Dentro de nuestro HTML, tenemos algunas clases, tenemos ojo y pupila. Yo quiero moverme y hacer cambios en el alumno. Entonces tratemos de obtener los elementos HTML para estas clases de pupila. Alguien diga var alumnos HTML Colección es igual a document.obtener elementos por nombre de clase y ya ves cómo estamos usando caso de camello aquí y luego quiero conseguir alumno/no alumnos, pupila. Digamos console.log, alumnos colección HTML. Es posible que hayas visto ese flash rápido, dice log omitido. En realidad tendremos que revisar qué es eso usando la Consola de Desarrolladores de Chrome. Podemos simplemente volver a registrar eso aquí. ¿Ves? Bitácora omitida. Entonces vamos a Desarrollador y consola JavaScript. Esto registra Colección HTML, que es div de pupila y div de pupila. Se puede ver que en realidad es seleccionar si estos elementos HTML, ya que paso el cursor sobre ellos, también podemos hacer clic derecho y decir revelar un panel de elementos, y ahí vamos. Tenemos estos dos ojos, lo cual es fantástico. Entonces vamos a cerrar eso. Esto en realidad no nos ayudará demasiado. Necesitamos convertir esta colección HTML de alumnos en una matriz. Hay algunas formas de hacer eso, pero una de las más simples es las pupilas var. Array es igual a array.from, y simplemente pegamos en nuestros alumnos HTMLCollection allí. Si estás queriendo hacer el código de producción listo, solo comprueba que esta pieza de código funcione en todos los navegadores en los que quieres que funcione tu código. Ahora tenemos a nuestros alumnos Array, vamos a volver a comprobar esto, también un tronco omitido. De nuevo, log omitido. Vayamos a ver qué trae esto de vuelta. De nuevo, nos va a dar a nuestros dos alumnos, pero en lugar de una colección HTML, no va a ser una matriz, lo que significa que podemos trabajar con ella. Vamos a cerrar eso, vamos a copiar esta matriz de alumnos, y vamos a entrar en nuestra sección ascendente por aquí. Hemos elaborado nuestra salida x, ahora vamos a aplicar salida a HTML. Copiamos a nuestros alumnos Array, y luego usamos la función array rad llamada ForEach. Ahora nuestra función ForEach toma un argumento de función. Podemos decir función y dentro de aquí, vamos a poner una función anónima. Ahí vamos, y ejecutamos código para cada alumno que está dentro de nuestra matriz. Dentro de esta función, obtenemos información posible. El primer pedazo de información es el elemento real. Se podría escribir elemento, yo voy a escribir alumno, porque quiero saber que estoy trabajando con un alumno, y luego también se pasa lo que dice Luca. El primer alumno, va a obtener un valor cero cuando registremos i, el siguiente va a obtener un valor de uno cuando registremos i Esto es realmente, realmente genial porque significa que puedes cambiar tu código, puedes cambiar alguna lógica basada en que i es. Es un poco confuso cuando digo i Nos vendría bien algo así como k aquí. Digamos pupil.style.transform, y esto en realidad va a cambiar el HTML, igual. Ellos quieren decir traducir x. Voy a usar translate x por ahora. Voy a decir traducir x, y voy a decir 75 píxeles. Ahí vamos. Veamos si esto realmente funciona. Ahora mismo, no está haciendo nada porque todavía no hemos tenido nuestro ratón movido. Despejemos estas consolas, y tal vez podamos simplemente borrar los registros por ahora. Ya ves cómo nuestros alumnos habían sido codificados para ser de 75 píxeles. Si hacemos clic con el botón derecho y decimos Inspeccionar, se puede ver que tiene aplicado una traducción de 75 píxeles. Eso es fantástico. Cerremos esto de nuevo, podemos desplazarnos a la parte superior, y solo podemos sacar este registro de consola, y luego nos desplazamos hacia abajo para aplicar salida a pieza de código HTML. En lugar de hacer de esto un valor estático, hagamos de esto un valor dinámico. Podemos decir plus plus, y ahora podemos poner un valor output.x.current aquí mismo. Lo que esto está haciendo es, esto es concatenar tres valores diferentes. Esta cadena, este valor numérica con esta cadena, y está poniéndolos todos en un solo valor de cadena. Se llama concatenación de cuerdas. Ahí hay una palabra descriptiva increíble. Es aplicarlos al valor pupil.style.transform. A ver si esto funciona. Ahí vamos. Es bastante divertido. Despejemos nuestra consola y simplemente cerremos eso. Eso es realmente, realmente genial. Es divertido. Se está superponiendo un poco, por lo que podríamos cambiar un poco nuestros valores de entrada o salida. Si nos desplazamos hasta aquí, cambiamos nuestros valores de salida a menos 70 y quizás nuestro final a 70. Ahí vamos. Nunca lo alcanza del todo, o lo que podríamos hacer es dentro de nuestro CSS, podríamos cambiar nuestro i, solo podríamos decir desbordamiento a oculto. Eso significa que cuando llegamos al borde, no se superpone, simplemente va atrás. Entonces tu elección qué hacer aquí. Sólo ocultemos eso otra vez. ¿ Qué sigue? Déjame mostrarte algunas cosas realmente geniales. Por el momento, nuestros pupilos siguen al ratón. ¿ Cómo conseguimos que no siga al ratón, sino que sea inverso? A medida que muevo el ratón de izquierda a derecha, las pupilas se mueven de derecha a izquierda. ¿ Eso es posible? Bueno, echa un vistazo a esto. Nuestra salida.x.current equivale a la salida.x.start en los momentos. ¿ Qué pasa si empezamos al final, y decimos menos este valor? Eso significa que a medida que vamos del lado derecho al lado izquierdo, no es hacer lo contrario de lo que está haciendo nuestro ratón. Ahora lo que quiero que hagas es pausar este video y tratar que los valores y funcionen para los alumnos. Te voy a mostrar cómo haría los valores y para los alumnos. Vamos a ir. Pondré secciones aquí, solo copiemos y peguemos esto. Menos 100 a 100, debe ser aproximadamente los mismos valores. Se pueden cambiar estos si se quiere. A lo mejor podemos, vamos a cambiarlo a 125, así. Entonces solo calcularemos nuestro rango para nuestra y Ahí vamos. Tenemos un mouse x input, y mouse y input, salida x. Vamos a obtener nuestra salida y, así, y podemos empezar por el final de nuevo. Cambia a y, ratón y fracción, lo cual es realmente importante. En realidad puedes experimentar con el ratón x con tu y, eso es un poco divertido. Te lo dejaré a ti. Entonces por aquí donde aplicamos al HTML, en lugar de usar translate x, voy a usar translate, lo que significa que necesito poner otro valor por aquí. Podemos decir 50 píxeles y movemos nuestro ratón por ahí. Esto siempre se mantendrá en esa misma posición. Eso no es exactamente lo que queremos, queremos que esto sea dinámico, así que en lugar de 50 píxeles, queremos usar una concatenación más de cadenas aquí. Pondremos entre comillas simples, plus, plus, y luego entre las más usaremos nuestra salida y.current. Veamos qué pasa aquí. Esto va exactamente a donde no va nuestro ratón, y ves que en realidad podemos ocultar nuestros globos oculares, lo cual no es ideal. Voy a cambiar mis valores aquí a tal vez 75, y los cambiaré a 75 y 75 también. Ahí vamos. Bastante cool. Si quisiéramos que nuestro valor y siguiera nuestra posición del ratón en lugar de ser inverso, podríamos empezar en la posición inicial, y luego agregar esta pieza del cálculo. Ya ves como muevo mi ratón hacia arriba, sigue a mi ratón. A medida que voy de izquierda a derecha, los ojos hacen lo contrario. Se puede cambiar el código realmente fácil y simplemente actualizar el HTML. Para el ejercicio de estiramiento con esto, lo que quiero que hagas es, quiero que pruebes por cada alumno, hagas un movimiento en una dirección diferente. Al mover mi ratón de la parte superior de la pantalla a la parte inferior de la pantalla, quiero que un ojo siga a mi ratón, y quiero que el otro ojo no siga a mi ratón. Yo quiero que sea inverso. Lo mismo para la x. A medida que muevo mi ratón de izquierda a derecha, quiero que un ojo siga al ratón, y quiero que el otro ojo haga lo inverso. Pausa el video aquí, y mira si puedes hacer eso. Vamos a probar esto. Yo quiero que mis alumnos hagan las cosas opuestas. Lo que es genial es que tengo este valor k o i valor, como quieras llamarlo. Voy a decir si, y voy a decir k igual, igual, igual a cero, que será el primero yo, hacer algo, de lo contrario, hacer otra cosa. Solo copiemos y peguemos esto aquí, copiemos y peguemos esto aquí, y saquemos esto, que se ve así. Esto aún debería funcionar exactamente igual, tenemos la misma pieza de código en ella. Ahora tengo aquí mis valores actuales. Lo que voy a hacer es, voy a cambiar o agregar un valor diferente. Voy a copiar y pegar esta salida x, y voy a decir punto opuesto. Voy a decir inicio más este valor por aquí, y voy a hacer exactamente lo mismo por mi valor y. Voy a decir lo contrario es el final, menos, y empezar más. Ahora, podrías llamar a esto como quisieras. Podrías llamarlo inverso, incluso podrías simplemente cambiar esto para empezar, y esto para terminar, y esto a más, y esto a menos, lo que quieras. Ahora tengo dos valores de salida con los que puedo trabajar. Tengo la corriente y tengo lo contrario. Veamos qué pasa aquí, si actualizo esto a opuesto y opuesto, y éste a actual y actual, ¿qué pasa? Si voy todo el camino al medio, él es normal, y si voy todo el camino a la izquierda, se va un poco como extraño entrecerrado, si voy todo el camino a la derecha, súper entrecerrado. Ahí vamos, puedes empezar a divertirte un poco, todo codificado. El HTML solo está siendo actualizado por tu código, realmente genial. En el siguiente video, vamos a llevar esto al siguiente nivel. Hemos aprendido a mover las cosas con JavaScript. Ha sido muy divertido. Pero por el momento, no hay mucha profundidad. No hay mucho paralaje. Vamos a introducir paralaje y profundidad en el próximo video. Yo lo espero con ansias. 7. Crear el efecto de paralaje: En este video, vamos a crear una ilusión de profundidad. Hay varias formas de hacer esto pero una forma que me gusta bastante es dar a cada elemento de paralaje en valor de profundidad entre cero y uno. Sí, estamos hablando de valores entre cero y uno otra vez pero, ¿por qué? Porque es fácil conectarse a nuestros valores de salida. Cero significa muy cerca y uno significa muy lejos. A medida que un elemento se aleja cada vez más, se moverá cada vez menos rápidamente. Cómo hacemos esto en código es, para cada elemento comenzamos con las salidas x e y que elaboramos en el último video luego restamos un valor que se compone multiplicando las salidas x o y actuales por el elemento profundidad. Si la profundidad de un elemento 0.5 entonces las salidas x de los elementos serán la mitad de la salida x actual. Si la profundidad de un elemento es cero, las x salidas de ese elemento serán la salida x completa y si la profundidad de un elemento es uno entonces la salida x para ese elemento será cero. Otra cosa que debemos tener en cuenta es dónde aparecen nuestros elementos en pantalla. En HTML, a menos que especifique elementos z-index, aparecerá debajo de los elementos que vienen después de él y encima de los elementos que vienen antes de él. Si nuestro primer elemento tiene una profundidad de 0.1 y nuestro segundo elemento tiene una profundidad de 0.8 en HTML el segundo elemento aparecería encima del primero. Pero de acuerdo a las profundidades de los elementos, queremos que el primer elemento aparezca en la parte superior porque tiene un valor de profundidad menor. A menos que se quiera establecer manualmente los índices z o poner todos los elementos que están más lejos en la parte superior del documento entonces necesitamos ajustar los valores del índice z en cada elemento con código. Podemos hacerlo estableciendo un ZIndexRange. Seguidamente elaboramos elementos zIndex restando el Rango zIndex multiplicado por la profundidad del zIndexRange. El ZnDiexRange debe correlacionarse con o ser mayor que la cantidad de decimales que pretende utilizar en sus valores de profundidad. Si está utilizando decimales simples entonces un zIndexRange puede ser 10. Si estás usando dos decimales entonces usa un ZIndexRange de 100 y así sucesivamente. Un ZIndexRange de 1,000 o 10,000 es una apuesta bastante segura. Como puedes ver, todo tiene que ver con profundidad. Ahora, entremos al código. Tenemos un poco que cubrir. Si bien en ojos googly el ejemplo fue bastante divertido de jugar con y crear realmente no nos va a ayudar en la creación de una experiencia de paralaje. Voy a hacer un poco de re-modelado aquí. En primer lugar, voy a quitar mis ojos del HTML y crear algunos elementos de elemento de paralaje para que podamos crear tal vez tres de estos. Entonces en mi CSS, lugar de eye1 y eye2, en lugar de mi pupila, voy a cambiar mi.eye2 tal vez solo copiemos y peguemos esto al elemento paralaje. Color de fondo, podemos cambiar esto a negro. El color de fondo es negro. El ancho y la altura 200. Radio fronterizo podemos sacar esto, ¿de acuerdo? El puesto es la izquierda absoluta y la parte superior-izquierda, margin-top. Eso está todo bien. Se ve genial. Está en el centro de la página. El desbordamiento: oculto, podemos sacar eso. Lo que haremos es que cada uno de esos elementos establezca un color de fondo separado. Entonces en la parte superior aquí, en lugar de pupilsHTMLCollection, podemos decir ítems htmlCollection y podemos copiar y pegar eso. En lugar de buscar cierre de pupila, nuevo vamos a estar buscando paralax-item. Podemos copiar y pegar eso. Entonces en lugar de pupilsArray voy a ir por artículos Array. Después nos dieron nuestros insumos y nuestras salidas las cuales son todas bastante buenas. Voy a cambiar estos de 75 a 100 sólo para que haya un poco más de movimiento, quizás incluso podamos decir 150. Solo copiemos y peguemos estos. Nuestras salidas se manejan. Después conseguimos que se trabajaran todas las entradas de MouseX y Mousey. Tenemos nuestra salida x. No necesito una corriente y un opuesto que se esté arreglando todo el tiempo. Yo sólo voy a ir por corriente. Voy a quedarme con el final menos este valor aquí. Aplica salida a HTML, eso es genial así que vamos a ir con nuestros valores actuales. Tomemos esto y sobrescribamos esto porque no va a haber más ojos. En lugar de nuestros pupilsArray aquí vamos a ir por ItemsArray. En lugar de referenciar a este elemento con pupi podemos ir item y luego item.style.transform y luego lo traducimos. Parece que está funcionando fantástico. Vamos a poner un poco de estilo en estos bloques. Yo quiero decir fondo-color. ¿ De qué color quiero? Bueno, éste va a ser negro, así que eso es genial. Copiemos y peguemos estos atributos de estilo. Abramos nuestro panel de activos en lápiz de color. Sólo voy a copiar uno de estos y pegarlo por aquí. Entonces vamos por un azul y peguémoslo por aquí. Muchas gracias. Ahora tenemos todas nuestras plazas moviéndose exactamente a la misma velocidad. Lo que está pasando aquí es que si me meto en esto, verás el meñky y si entro en éste fuera, verás el negro. Si entro en ellos ambos y otra vez, sólo sácame que todos se están moviendo exactamente a la misma velocidad. Lo que vamos a hacer aquí es que vamos a empezar a introducir nuestra profundidad. Para este ítem 1 Quiero una profundidad de digamos 0.1. En JavaScript podemos usar data-depth y cuando digo depth, puedes poner lo que quieras aquí. Depende de ti. Vamos por 0.1 y vamos a copiar y pegar esto. Vamos a hacer esto un poco más grande. Esto puede ser 0.3 y 0.6. Eso significa que ésta debe ser nuestra plaza más cercana. Este está en medio y éste debe ser el más alejado. Aquí podemos ver que ese no es el caso, pero no hemos hecho ninguna codificación para hacerlo así. Esto solo destaca en html y CSS y vamos a bajar a nuestra matriz de elementos para cada bucle. Aquí podemos empezar a jugar con la profundidad. Para realmente meter la profundidad en JavaScript, esto es lo que vamos a hacer. Vamos a decir var profundidad. Instalamos esta profundidad dentro de una variable llamada profundidad. Diremos item.dataset.depth. Cuando digo profundidad aquí, si nombraste a tu profundidad de datos, algo así como datos-distancia entonces dirás dataset.distance, pero aquí tenemos profundidad. Veamos si esto realmente está llegando a través de console.log. Diremos k para el artículo luego diremos profundidad y profundidad. Cuando movemos nuestro ratón alrededor, el primer elemento tiene una profundidad de 0.1, el segundo tiene una profundidad de 0.3 y el tercero tiene una profundidad de 0.6. Están llegando los artículos. El caso es que estos son valores de texto. Yo quiero que sean valores numéricos. ¿ Cómo conseguimos que eso suceda en JavaScript? Bueno, podemos usar esta cosa llamada parse float. Después seleccionamos eso y luego lo ponemos en llaves. Lo que hace el flotador de parse es que convierte algo en un número y específicamente un número con decimales. Sabemos que tenemos decimales por lo que esto funciona muy bien. El otro es que necesitamos poner coma 10. Si no pones esto no es un partido trans masivo, pero es la mejor práctica. El motivo por el que pongo la coma 10 aquí es porque estamos diciendo que queremos que este sea un sistema decimal. Podría convertir un número o un trozo de cuerda a algo que cuenta por 15s por ejemplo. Esta es realmente buena práctica. Vamos a mantener eso dentro. Ahora cuando nos movamos y veremos que estos son todos números ahora, son de color naranja, no tienen cotizaciones a su alrededor. Ahora, ¿cómo aplicamos esto realmente a cada una de nuestras plazas? Vamos a configurar una salida de elemento. Esto va a verse bastante similar a nuestra salida arriba aquí excepto que no tendríamos un final de inicio y valor actual solo tendremos un valor x o un valor de y. No necesitamos cada uno de estos. Aquí abajo, vamos a tener nuestro valor x. ¿ Cuál va a ser nuestro valor x? Bueno, va a empezar en nuestra salida x.current. Va a ser que como iniciador y diremos menos la salida x.corriente multiplicada por la profundidad. Podemos poner llaves alrededor de éstas solo para asegurarnos de que sabemos que se está calculando primero pero realmente se calcula primero por el signo de multiplicación. Tenemos toda nuestra exposición. Ahora digo itemoutput.x Veamos si esto funciona. El y sigue siendo parte de la posición general o global pero nuestra x está determinada por nuestra profundidad que es bastante cool. Ahora pongamos aquí la posición y. Podemos simplemente copiar y pegar este y:output.y, output.y y ItemOutput.y.Y Ahí vamos. Ahora puedes ver que se está moviendo inversamente a la posición de nuestro ratón y se basa en la profundidad. Despejemos esto y cerremos. Pero todavía hay un pequeño problema. En nuestro HTML verás que nuestra profundidad, esta está en 0.1 lo que significa que debe estar al frente, ¿verdad? porque está más cerca de nosotros. A pesar de que esto se ve bien, en realidad no es cierto. Cuanto más cerca esté algo, más rápido debería parecer que se mueve. ¿ Cómo cambiamos esto? Bueno, en nuestro JavaScript ahora podemos empezar a cambiar el índice z o el índice z, dependiendo de qué parte del mundo eres. Añadamos un nuevo valor aquí, z-index. Lo que vamos a hacer es que vamos a decir que 10 mil van a estar fuera en rango de índice z. Crearemos una nueva variable en nuestra salida en breve pero empezamos con 10,000. Es sólo un número realmente seguro con el que trabajar. Vamos a decir 10,000 menos 10,000 multiplicados por nuestra profundidad, ¿de acuerdo? Ahora, sólo podemos ponerlos en llaves para que sepas que eso se está trabajando primero. Si nuestra profundidad es una, entonces nuestro índice z va a ser cero. Si nuestra profundidad es cero, significa que nuestro índice z o zIndex va a ser de 10,000. Después agregamos otra línea para nuestro artículo y decimos item.style.zindex es igual y solo trazamos este número ahí. Eso no funciona. Abramos nuestra consola, troncos recortados. No hay mensajes de error, las cosas no funcionan. ¿ Qué está pasando aquí? Tenemos que ir a nuestra Consola de Chrome, Desarrollador, JavaScript y dice ReferenceError: z Index no está definido ya que ocurre en todo el show. Podemos bajar aquí y decir zIndex. No es ItemOutput.zIndex es sólo zIndex. Ahí vamos. Eso debería arreglar las cosas para nosotros, fantástico. Ahora nuestra caja negra está en la parte superior de la caja azul está en la parte inferior. Las cosas se ven realmente reales ahora, bastante cool. Es posible que notes algo un poco extraño ahora. Estos artículos son todos en realidad del mismo ancho y altura pero como los hemos movido hacia atrás cada vez más lejos, no parecen estar cada vez más lejos. Lo que podrías hacer es escalarlos manualmente o cambiar el ancho y la altura cuanto más y más lejos se pongan o podrías hacerlo con código. Podrías hacer un dinámicamente. En eso nos vamos a meter en el próximo video. 8. Hazlo más realista: Hemos hecho que suceda algo de magia de paralaje y se ve impresionante. Pero si estamos tratando de que las cosas se vean y se comporten como lo hacen en la vida real. Siempre habrá más cosas que podamos hacer. En este video, vamos a abordar dos de ellos. También haremos algo de optimización de código y sustituiré las cajas por unas hojas bonitas porque las hojas son frescas. El primero que tenemos que abordar es la escala. Si hay dos elementos que tienen el mismo ancho y alto, y uno de ellos está más lejos. Debe aparecer más pequeño en escala y debe parecer más pequeño según lo lejos que esté. Su escala debe ser relativa a su profundidad. Puedes codificar a mano la escala de cada elemento, o podrías hacerlo con código y por supuesto, vamos a ello con código. Podríamos calcular la escala realmente fácilmente iniciando con una y restando la profundidad de los elementos. Pero quizá no queremos que nuestros artículos sean tan pequeños. Establezcamos una escala de inicio y fin, lo que nos llevará a crear un rango de escala. Después para calcular una escala de elementos, comenzamos con la escala de inicio y luego agregamos la profundidad multiplicada por el rango de escala-escala. Se ve bastante familiar, ¿no? Lo siguiente que tenemos que abordar es la borrosidad. Los artículos aparecerán cada vez más borrosas cuanto más lejos se pongan. Pero no necesariamente queremos que se borren hasta cierta profundidad. De lo contrario, todo excepto los elementos y cero profundidad será borroso. Una forma en que podemos calcular la borrosidad es decidiendo un valor de profundidad inicial, que será donde la borrosidad se iniciará y la otra es un valor de rango de desenfoque, que sería lo borroso y el elemento pueden llegar. El valor de profundidad inicial necesita ser un valor entre cero y uno para que se correlacione con los valores de profundidad y el valor del rango de desenfoque es a lo que conectaremos la profundidad de cada elemento. Al igual que nuestro rango de índice Z son elementos El valor de desenfoque se calcula entonces restando el valor de profundidad inicial de la profundidad de los elementos y luego multiplicando que con nuestro rango de desenfoque, puede terminar con algunos valores negativos de desenfoque. Pero por el momento significa que esos elementos aparecerán no borrosas, que es exactamente lo que queremos. Ahora implementemos escala y desenfoque en nuestro código y mientras lo estamos haciendo, optimizemos un poco nuestro código. Convirtamos primero nuestros bloques en unas hojas de aspecto fresco. Abriremos nuestro panel HTML, démosle un poco más de espacio. Voy a sacar los atributos de estilo, boom, boom y boom. Entonces dentro de mi ítem de paralaje, voy a agregar una imagen y la fuente va a ser? Si abro mi panel de activos dentro de CodePen, hay un montón de imágenes. Podrías ir a fotos que no son ideales. Con CodePen pro, te permite subir tus propios activos. He subido un montón de mis propios activos de paralaje. Puedes utilizar estos activos si lo deseas. También puedes utilizar los activos disponibles en la clase y te mostraré cómo subir tus propios activos y copiar la URL si no tienes CodePen pro. lo hemos copiado. Vamos a pegarlo en nuestra fuente y ahí vamos. Está llegando a través. Vamos a copiar y pegar estos en nuestros artículos div y luego activo número 2 y activo número 4. Ahí vamos y estoy usando el activo número 4 en lugar del activo número 3 porque el activo número 3 es un splotch realmente grande y no se ve tan cool. Entonces dentro de nuestro CSS, voy a ir dot parallax, item y voy a abordar la imagen dentro de paralax item. Diré que el ancho o quizás el ancho máximo es del 100 por ciento y la altura máxima también es del 100 por ciento. Veamos qué hace eso. Sí, eso se ve bastante bien. Ahora, ¿cómo lo meto en medio? A lo mejor podemos usar algún flex, df para display flex Voy a decir justify-content, center y align-items center. Ahí vamos. Podemos despegar nuestro color de fondo. Podemos cambiar el ancho y la altura a 300 píxeles y ahí vamos. Ahora tenemos tres hojas encima una de la otra. Lo que quiero hacer ahora es que solo quiero rotar un poco las hojas. Abramos nuestro HTML y hagamos un poco de estilo en línea aquí. En primer lugar, vamos por unos atributos de estilo y cambiemos la rotación de transformación a unos 30 grados, así. Entonces copiaremos y pegaremos esto y cambiaremos esto a negativo 45 y éste a algo así como 110. ¿ Eso funciona en absoluto? No, porque hemos deletreado transformar mal. ¿Qué tal eso? Ahí vamos, y las cosas están empezando a funcionar ahora. Tenemos algunas hojas interesantes ocurriendo por el momento. Son un poco mejores que nuestros bloques. Tenemos nuestro HTML hecho, tenemos nuestro CSS hecho, ahora pasemos a alguna optimización de JavaScript. Lo primero que quiero hacer es, quiero quitar estos valores que realmente no sabemos cuáles son y qué pasa si cambiamos uno, entonces siempre tenemos que cambiar el otro. Cambiemos esto a output.zindex.range y vamos a copiar y pegar esto y luego aquí arriba solo pondremos nuestro objeto zindex y pondremos una clave de rango, y el rango será de 10,000. Esa es la primera optimización que quiero hacer. El motivo por el que hago esto es para que no tenga un montón de estos 10,000 números en todo el show. Sé exactamente lo que es y puedo actualizarlo en un solo lugar y lo actualizará a lo largo de mi código, lo cual es realmente genial. Lo siguiente que quiero hacer es, quiero cambiar cómo funciona esta función de movimiento de ratón mango en lugar de tener todo este código dentro de aquí, que se está volviendo realmente, muy largo, quiero dividirlo. El modo en que quiero dividirlo es que quiero crear una variable que se llama updateinputs y quiero almacenar aquí una función que ejecute este código. Tomemos este código de aquí y lo pongamos en esta función y luego vamos a ejecutar UpdateInput desde dentro de esta función. Significa que sé exactamente lo que está haciendo. Pero realmente no tengo que mirar el código y desplazarse por él cada vez. El único problema con esta forma de hacerlo es que el evento no estará presente en esta función. Lo que voy a hacer antes de llamar a eventos de actualización es que voy a asignar mi mouse.x a event.clientx y mi mouse.y a event.clienty. Tal vez estés pensando que bueno, ¿de dónde diablos se domina x viniendo? Bueno, vamos a crear eso. Vamos por el mouse var y crearemos un objeto y su x será cero y es y será cero. Ahora, cuando consigamos el evento, diremos mouse.x igual al event.clientx. Entonces en lugar de asignar event.clientx a nuestro mousex.current, podemos decir mouse.x y mouse.y Eso significa que podemos ejecutar nuestras entradas de actualización sin tener que depender de una propiedad de evento. Ahora hagamos lo mismo por nuestra salida. Esto crea una variable llamada UpdateOutlets y vamos a almacenar una función dentro de aquí. Podemos cortar esto y pegarlo. En lugar de tener dos líneas de comentarios, solo puedo decir salida x e y, y solo hagámoslo así. Eso se ve un montón más ordenado. Entonces llamamos a la función UpdateOutlets directamente después la UpdateInput y luego queremos poner esto en una función a. Este es un poco diferente porque estamos creando una salida de elemento para cada elemento y luego estamos actualizando el HTML. ¿ Cómo llamamos a esta función? Quizás puedas decir UpdateEachParallaxItem. ¿ Qué tal eso? Vamos a copiar eso, pegarlo. Diré que var es igual a función y luego podemos cortar esto y ponerlo aquí. Ahora nuestro código se ve mucho más legible. Simplemente vemos que está actualizando los insumos, está actualizando las salidas y luego actualizando cada ítem de paralaje. Esto también es realmente genial porque podemos llamar a cada uno de estos por separado y fuera de esta función de movimiento del ratón mango. Eso es genial. Hemos limpiado un poco nuestro código. Ahora, ¿qué sigue? Es tiempo de escala. ¿ Dónde hacemos nuestra escala? Bueno hacemos nuestra escala y nuestro ItemOutput. Añadamos una nueva propiedad a nuestro ItemOutput y nuestra báscula. ¿ Qué va a ser esto? Va a ser algo así como nuestro output.scale.start plus. Vamos a poner dentro de nuestros corchetes aquí, salida escala de puntos rango de puntos multiplicado por la profundidad. No hemos configurado esto, así que vamos a prepararlo. Todos estos, en realidad podemos simplemente ocultarlos por ahora, lo cual es realmente genial sobre CodePen. También está disponible en los editores de código. Podemos ocultar el valor del ratón y luego sigamos adelante y pongamos nuestra escala aquí. Voy a tener un valor de inicio, y el valor de inicio que recomendaría ser uno, porque una escala de uno significa que está en el tamaño original. Entonces tenemos un valor final, y el valor final tal vez pueda ser 0.2, pero lo actualizaremos en un momento. Entonces vamos a trabajar nuestra gama mucho como el resto de estos cálculos. Escala de puntos de salida rango de puntos es salida de escala de puntos extremo de punto menos salida salida salida salida salida punto punto punto punto. Tal vez estés pensando, “Espera, estaremos empezando con 0.2 y luego restando uno, lo que nos dará un valor de 0.8 negativo como nuestro rango”. Eso está perfectamente bien. Podrías cambiarlo si quisieras. No hay forma dura y rápida de hacer las cosas con código. Esta es justamente la forma en que lo estoy haciendo. Desplazémonos hacia abajo. Nuestra escala ahora es salida de escala de punto inicio, que sería una. Entonces estamos agregando el rango de puntos de escala de salida, que va a ser un valor negativo, multiplicado por la profundidad. Si nuestra profundidad es una, entonces nuestro rango de puntos de escala de puntos de salida va a ser negativo 0.8. Básicamente vamos a estar diciendo inicio más negativo 0.8, lo que nos dará 0.2 de una escala, lo cual es fantástico. Si nuestra escala o si nuestra profundidad está en cero, el rango de puntos de la escala de puntos de salida multiplicado por cero no será nada. Entonces nos quedaremos con una escala de uno. El problema con la escala es que escalar y traducir ambos son propiedades de transformación, por lo que tendremos que agregar escala a esta línea de código aquí. Entonces escala, vamos a probarlo, 0.5. Vamos a mover nuestro ratón por aquí. Ahí vamos. Son realmente pequeños, así que hagámoslo dinámico. Voy a ir por la escala de puntos de salida de artículo. Eso se ve bastante bien, y si nos desplazamos hasta aquí y establecemos escala final a cero, las cosas deberían hacerse mucho más pequeñas. Quizás si cambiamos nuestro HTML, si cambiamos el 0.6 a una profundidad de uno, en realidad deberíamos verlo desaparecer. No está en ninguna parte para ser visto. Eso se debe a que nuestro fin es cero, y tendrá una escala de cero. ¿Qué hacemos aquí? Volvemos a cambiarlo a 0.2 o 0.3, o si quieres 0.3, y luego ahí vamos. No es del todo cero. No me gusta que los artículos tengan una profundidad de uno, significa que no se mueven, así que prefiero ir por 0.9, luego se mueve ligeramente. Ahora tenemos nuestra escala ordenada, eso está hecho. A lo que sigue es la borrosa. Vamos a poner un valor de desenfoque por aquí en nuestra salida de artículo. ¿ Cuál es la salida de cálculo de desenfoque? Punto desenfoque de puntos profundidad inicial, que no hemos configurado del todo, y vamos a decir nuestra profundidad menos nuestro punto de salida desenfoque profundidad inicial. Vamos a poner esto dentro de un corsé para que funcione eso primero. Entonces vamos a decir multiplicar por nuestro rango de puntos de desenfoque de puntos de salida. Lo que esto está haciendo es decir que tenemos una profundidad, esto podría ser cero, lo que cero menos nuestra profundidad inicial, que sería 0.5 tal vez, lo que tendrías un 0.5 negativo multiplicado por el rango de desenfoque. Te daría un valor negativo, que está perfectamente bien para un artículo con una profundidad de cero. Vamos a poner en este valor de salida. Vamos a desenfocar y fijemos nuestra profundidad inicial, y digamos 0.5. Cualquier cosa que esté a 0.5 o superior comenzará a obtener un valor azul. Entonces estableceremos nuestro rango, y diremos 20 por ahora. Implementemos esto en el HTML. Iremos item dot style dot filter, que aún no hemos utilizado. En realidad necesitamos un valor de cadena para esto, y diremos desenfoque, y solo intentemos cinco píxeles en este momento, mueva un poco nuestro ratón. Ahí vamos, tenemos algunos valores de desenfoque. Ahora hagamos que esto sea dinámico. Lo que realmente es importante tener en cuenta aquí es que sí necesitas un píxel o algún valor de medición, así que solo eliminaremos los cinco y pondremos en el desenfoque de puntos de salida del ítem, y cuando movemos nuestro ratón, ahí vamos. Ves un artículo que está más atrás ahora está borroso, y los artículos más cercanos a nosotros, no están borrosas. Si cambiamos los valores de profundidad inicial, tal vez cambiemos eso a 0.1, veremos que mi ítem, que está en 0.1, todavía no está borroso, pero los ítems en 0.3 y 0.9, definitivamente son borrosa. Si tuviéramos que cambiar nuestro rango a algo así como 40, deberías ver que los artículos más atrás se vuelven aún más borrosos. Tenemos nuestra configuración de desenfoque. Lo único que habrás notado es que cada vez que cambie mi código, así que solo voy a poner un poco de código aleatorio aquí, verás que antes de mover el ratón, estas cosas no se borran y las no se escalan, lo cual es problemático. Significa que a menos o hasta que movamos nuestro ratón, las cosas en realidad no van a parecer como si estuvieran borrosas o escaladas. Saquemos esto e implementemos algún código que arregle esto. Lo que es genial es que realmente hemos hecho actualizar entradas, actualizar salidas, y actualizar cada elemento de paralaje. Podemos simplemente copiar y pegar este código e ir al fondo de nuestro código y pegarlo. Deja dessangrarlo, y desde el principio, verás que ahora las cosas están escaladas, y las cosas están borrosas. Están ligeramente compensados, realidad no parece que estén en el medio, así que quizá lo que podamos hacer es ajustar la posición X e Y del ratón. Vamos a nuestro ratón X e Y, y vamos a ir por el ancho interior de punto de ventana y punto de ventana altura interior. A lo mejor no deberíamos hacer eso. Quizás deberíamos decir multiplicarlo por 0.5. Esto significa que la X e Y estarán en medio de la ventana, como si fuera por ahí, lo que se ve muy bien. Si hacemos algunos cambios de código o alguien viene y visita nuestro pequeño bolígrafo o nuestro sitio, significa que antes de que hayan tenido la oportunidad de mover el ratón, las cosas se van a ver borrosas, se van a escalar, lo cual es fantástico. Hemos hecho un poco de actualización de código, hemos implementado hojas en nuestros ejemplos de paralaje, y hemos hecho un poco de escalado y desenfoque. Super-duper. Según lo prometido, en realidad necesito mostrarte cómo subir tus propios activos. Si abres una nueva pestaña, puedes buscar alojamiento de imágenes. Hay un montón de diferentes formas en las que puedes hospedar imágenes. Algunos de ellos no funcionan, pero sólo pruébalo. A lo que estamos apuntando es a que queremos obtener una URL de imagen que podamos pop en CodePen. Vamos a empezar a subir. Elegimos un activo de paralaje como esta cara genial, decimos: “Está bien, vamos a subir”. Después copiamos su enlace, pegas su enlace. Esta no es la URL de la imagen. Una vez que se carga la imagen, haces clic derecho y dices “Copiar dirección de imagen”, pega eso de nuevo, y verás que dice dot PNG o dot JPEG, lo que sea que subas. Después puedes copiar esta URL, y luego dentro de tu HTML, puedes pegar eso. Ahí vamos. No necesitas CodePen para subir imágenes ni para poner imágenes en tus proyectos. Ahora tenemos una cara fresca, y no necesitamos usar CodePen Pro. O si no estás usando CodePen en absoluto y estás en tu computadora local, es bastante fácil solo hacer referencia a imágenes en el sistema de archivos usando URL relativas. Súper fácil. Son pocas las cosas que podríamos agregar e implementar que lo harían aún más realista, y tal vez incluso darle un poco de factor wow. Si se te ocurre algo que te gustaría intentar implementar, sugiero que intentes codificarlo tú mismo, diviértete un poco, comete algunos errores, y si necesitas ayuda o las cosas no funcionan como esperas, comparte tu URL en la sección Comentarios de la clase, y trataré de ayudarte. 9. Planifica como un amateur: Cuando diseñas y codificas varias versiones del efecto Parallax, puede haber una gran cantidad de piezas móviles. Este no es solo el caso del paralaje, sino también para otras piezas de diseño de interacción. planificación se convierte en una parte esencial del proceso y aún más esencial cuando estás trabajando con un equipo. Tratar de descifrar todo por delante, como un profesional para la derecha simplemente no va a funcionar, o si estás tratando de hacer que todo funcione mágicamente mientras estás codificando incluso nunca pasó o toma mucho más tiempo que si solo estás planeado en un principio. ¿ Cómo planeas? Esa es una gran pregunta. Planeo de dos maneras, y las hago ambas en múltiples etapas de un proyecto. El primer método es anotar lo que quiero que suceda. Empiezo por escribir de manera bastante amplia y descriptiva. Mi primera pieza de escritura puede verse algo así. A medida que el usuario mueve su ratón, los elementos se mueven. Yo entonces iría a algo como esto. A medida que el usuario mueve su ratón de izquierda a derecha, los elementos se mueven de derecha a izquierda. Entonces lo cambiaré de nuevo, a medida que el usuario mueve su ratón de izquierda a derecha, los elementos se mueven inversamente de derecha a izquierda en una proporción. Entonces a medida que el usuario mueve su ratón de izquierda a derecha, cada elemento se mueve inversamente de derecha a izquierda a una velocidad relativa a su distancia lejos del usuario, se puede ver cómo estoy agregando cada vez más detalle a mi descripción aquí. Por último, terminará así. A medida que el usuario mueve el ratón horizontalmente, cada elemento se mueve inversamente a una velocidad relativa a su distancia lejos del usuario. Esto puede sonar un poco complejo, y es por eso que no comencé a escribir complejo porque esto es un poco alucinante. Esta descripción final es mi meta final. Empiezo con esto en mente y se puede ver cómo cambió con el tiempo, cuanto más me salí de la cabeza, más detallada podría entonces estar, terminé haciéndolo sucinto y un poco más genérico. Mi siguiente paso es descomponer mi objetivo en trozos manejables. Cuando las cosas se han roto, todo parece más fácil y relativamente simple. Estos trozos forman parte de mi plan de acción. Lo que es importante entender es que no creé todo el plan de acción a la vez. Mi siguiente pedazo de escritura puede terminar luciendo algo como esto. Rastrear el ratón X usando eventos de movimiento del ratón. comparó el ratón X con el ancho de la pantalla para crear una fracción. Conecta esa fracción a una gama de elementos X. Haga esto para cada elemento y aplique una profundidad. Entonces por cada punto, podría descomponerlo aún más. El track mouse X usando mouse mover eventos, puedo hacer algunas notas como esta. Uno, agregar oyente de eventos, dos, crear una función de nombre, manejar el movimiento del ratón, tal vez tres, crear una variable que almacene el evento X dentro del movimiento del mouse del mango. Ahí vamos, se puede ver cómo estoy escribiendo todo esto. No tengo que hacer todo de una vez. Lo que termina pasando es que estas líneas pueden convertirse en comentarios en tu JavaScript, que luego puedes seguir realmente fácilmente. Ahí como tus punteros en un laberinto, medida que te pones mejor y mejor, tal vez te encuentres saltando partes de la planeación. Eso está perfectamente bien. Lo que realmente es importante recordar es que en cualquier momento o en cualquier punto del proceso, se puede hacer un plan. Simplemente escribe lo que quieras que suceda en forma puntual, ya sea en un comentario de Javascript, o en un pedazo de papel en un documento de texto regular. Tengo una almohadilla masiva en mi mesa la mayor parte del tiempo, así que puedo simplemente tomar notas rápidamente, puedo planear rápidamente. Desglosa lo que tiene que pasar en inglés o en el idioma que mejor hables, y luego escribe el código para ello. El segundo tipo de planeación que hago es poner bolígrafo a papel o lápiz al iPad. Dibujo cosas, trabajo las cosas, dibujo los documentos, dibujo con una pantalla Lienzo mientras dibujo con unos ratones, dibujo elementos. Dibujo todo lo que puedo y luego empiezo a poner valores falsos en lugares. Mi ratón X y mi ancho de pantalla, mi rango de salida, y luego empiezo a hacer cálculos. Represento incógnitas con Ys y Bs y Xs. Hago los cálculos legibles y preferentemente en JavaScript o algo que se pueda transferir fácilmente a JavaScript. Después intento el mismo dibujo con diferentes valores, veo qué resultados obtengo y luego pruebo la interacción en diferentes etapas, cuando mi ratón está todo el camino a la izquierda, cuando mi ratón está en el medio, cuando mi ratón está todo el camino a la derecha. Entonces, una vez que creas que sabes lo que está pasando, reemplaza los valores inventados por nombres de variables. Estos bocetos de planeación son dorados, es como si tuvieras estos momentos de brillantez, estos momentos lúcidos donde solo eres un genio, que grabas. Pones bolígrafo al papel, haces todos tus cálculos, y luego usas un más tarde donde no estás, los sentimientos son brillantes. Hay una posibilidad muy pequeña de que puedas recordar todos estos cálculos en tu cabeza mientras estás codificando. Me parece mejor escribirlo y luego transferirlo al código. Lo genial de la planeación es que no necesita ser perfecto y no necesitas hacerlo todo de una vez. Se puede iterar en él rápidamente. Se puede mostrar a la gente, se puede mejorar en él y se puede saltar de nuevo a él cada vez que se quede atascado. Puedes usar una mezcla de escritura y dibujo cuando quieras. 10. Captura la posición de desplazamiento: Ahora que hemos creado nuestra primera experiencia de paralaje, podemos entrar en crear una experiencia de paralaje de desplazamiento. Esto es realmente divertido de crear y la mayoría de la gente está totalmente hipnotizada por ellos. ¿ Qué queremos lograr sin embargo? El primero que quiero lograr es, quiero crear un valor de fracción de entrada ScRolly al que pueda conectar mis valores de salida. El segundo que quiero lograr es, entonces quiero que cada uno de mis elementos se mueva en la dirección opuesta a la dirección de desplazamiento, pero proporcional a su profundidad. Cuanto más alejado esté un elemento, más rápido se moverá esta vez, pero en la dirección opuesta a la dirección de desplazamiento. lo único que necesitamos tener cuidado antes de saltar al código es que el máximo que podemos desplazar es en realidad la altura del documento menos la altura de las ventanas. Recordemos esto al configurar nuestro valor final de entrada ScRolly. Vamos a saltar al código. Empecemos por hacer nuestros documentos, documento de desplazamiento. Vamos a saltar a nuestro HTML aquí. Podemos crear algunas cosas llamadas paralax-container. Ahí vamos. Yo sólo voy a sangrar ese código. Vamos a pegar eso y podemos copiar y pegar contenedor de paralaje así. Eso es bueno. Entonces, podemos darle a ésta una clase alt y ésta una clase alt, para que podamos cambiar los colores de fondo. Entonces en el CSS podemos pegar esto y darle una altura o un min alturas de 100 VH, que es 100 altura del visor. Podemos decir.parallax-container.alt y podemos darle a esto un color de fondo. ¿ Qué vamos a elegir? Vamos por activos. Escogamos un verde realmente claro tal vez, tal vez un verde mucho más oscuro o incluso podríamos ir por array como el rosa. Aquí vamos. Vamos a pegar esto por aquí. Ahora mientras nos desplazamos hacia abajo, habrá divs verdes y rosados. Simplemente nos muestra cuánto nos desplazamos. También tenemos esta barra de desplazamiento en el lado derecho. Ahí vamos. Ahora tenemos un documento que se desplaza. También podemos agregar todos estos artículos de paralaje en segundo contenedor de paralaje. Esto significará que a medida que nos desplazamos hacia abajo, ¿dónde están? No tengo ni idea. Eso se debe a que no hemos puesto un relativo de posición en nuestro contenedor de paralaje. A medida que nos desplazamos hacia abajo, ahí vamos. Eso se ve realmente bonito. Los colores funcionan muy bien juntos. Acabamos de tener uno y dos divs con nuestras hojas adentro. Ahora tenemos nuestro mousemove funcionando. Voy a comentar eso por ahora. En lugar de escuchar un mousemove, eso en realidad ya no va a funcionar. Vamos a empezar a trabajar con un oyente de eventos que escuche un evento de scroll. ¿ Cómo hacemos esto? Bueno, en lugar de escuchar un mousemove en la ventana, vamos a decir document.AddeventListener y vamos a escuchar un evento de scroll y diremos handlescroll. Entonces para nuestro handlescroll equivale a una función. Todo esto debería parecer bastante familiar. Solo registremos algo para asegurarnos de que esto realmente esté funcionando. Desplazamiento. Abramos nuestra consola. A medida que nos desplazamos, estamos consiguiendo un montón de desplazamiento sucediendo. Ahora, ¿cómo sabemos cuánto nos estamos desplazando en realidad? Esa es una pregunta realmente buena. De la forma en que vamos a hacer eso es que vamos a trabajar var Scrollamt igual y vamos a ir por document.DocumentElement.ScrollTop. A ver si esto funciona. Vamos a decir Scrollamt y Scrollamt. Abriremos de nuevo nuestra consola. Aclaremos eso y a medida que nos desplazamos, aquí vamos. Nuestro Scrollamt está llegando. El último es cero. A medida que vamos hasta el fondo, es 951. Estas son nuestras cantidades de pergamino. Quizás ahora podamos averiguar cuál es nuestra cantidad máxima de desplazamiento. ¿ Cómo hacemos esto? Bueno otra vez, vamos a utilizar este document.DocumentElement. Diremos ScrollMax es igual a document.DocumentElement.ScrollHeight. Lo compararemos así. Ahí vamos. Vamos a desplazarnos por esto. El scroll max es de 1268. Esto no está funcionando realmente, ¿verdad? Pero recuerda, la altura del documento no va a ser la misma que la cantidad de desplazamiento porque aún tenemos nuestra altura de ventana a una cuenta. Hagamos menos ventana.InnerHeight. Vamos a desplazarnos otra vez, 951, 951. Ahí vamos. Tenemos nuestro valor constante, tenemos nuestro valor final. Ahora podemos tomar estos valores y crea una entrada a partir de ellos. Voy a copiarlos por ahora. Vamos a darnos un poco más de espacio. Subiremos a nuestros valores de entrada y diremos ScRolly y crearemos un nuevo objeto aquí y diremos inicio. Nuestro inicio va a ser cero. Podemos cambiar esto a algún valor además de cero. Pero en este caso, queremos hacer un seguimiento de la posición de desplazamiento de todo nuestro documento. Entonces vamos a tener un valor final, que va a ser, nuestro scroll max. Bueno, todo eso. Ahora esto es realmente, realmente largo. Lo que podemos hacer aquí es decir var y podemos decir, HTML es igual a document.DocumentElements. Ahí vamos. Entonces podemos reemplazar eso y eso. Nuestro valor final, va a ser eso. Entonces nuestro Scrollamt, esta va a ser nuestra corriente. En realidad podemos arreglarlo un poco más tarde. Actual será cero en el principio. También necesitamos nuestra fracción y nuestra gama. Vamos a entrenar nuestra fracción un poco más tarde, y vamos a trabajar nuestro rango justo debajo de la entrada. Vamos por input.Scrolly.Range es igual, y luego podemos simplemente copiar y pegar esto. Scrolly.Fin menos desplazadamente.Inicio. Lo cual nos dará nuestra gama. Ahora lo que realmente importa del rango es que cambiará tan pronto como cambie el valor final del ScRolly y el valor final cambiará cuando el navegador cambie el tamaño. Actualicemos ese valor. Si bajamos al redimensionamiento, el MouseX, Mousey. Vamos a poner.Scrolly.Fin. ¿ Cuál fue nuestro valor final? Vamos a desplazarnos hasta aquí. Copia y pega esto. Desplázate todo el camino hacia abajo otra vez. Nuestro valor final se actualiza y luego nuestro valor de rango también se actualiza. Vamos a copiar el cálculo del rango de ScRolly y vamos a pegarlo aquí. Ahora estamos viendo HandleScrolly. Tenemos el Scrollamt, que ahora en realidad va a ser nuestra entrada.Scrolly.Current. Este va a ser nuestro html.ScrollTop. Entonces nuestra entrada.Scrolly.Fracción va a ser qué? En este caso va a ser nuestra corriente dividida por el máximo, por lo que input.Scrolly.end. Pero recuerda nuestros cálculos anteriores, si solo puedes mirar un poco más arriba por aquí, actualizar entradas, es nuestra fracción de ratón de entrada es nuestro mousex.Actual menos nuestro mousex.Start dividido por nuestro rango de entrada MouseX. Vamos a copiar este formato. Bajemos aquí, manejemos scroll y vamos a copiar y pegar esto. Esto es simplemente más preciso en cuanto empecemos rastrear nuestro documento desde una posición distinta de cero hasta una posición que no es la altura total de nuestro documento necesitaremos esto para calcular la fracción real. Nuestro scrolly.Fracción va a ser el scrolly.Actual menos el scrolly.Start, que en este caso es sólo cero y vamos a dividir por el scrolly.Range, que en este caso también va a ser el valor final scrolly. Eso es manejar el pergamino. Pero ahora puedes ser como, bueno, ¿por qué está el otro dentro de entradas de actualización llegando con eso ahí dentro. Por supuesto, podemos. Hagámoslo. Copiemos y peguemos, actualicemos entradas a nuestro HandleScroll. Ahí vamos. Simplemente vamos a cortar esto, sacar todo esto, y vamos a poner esto en nuestros insumos. Ahí vamos. Nuestro insumo está llegando ahora. ¿ Cómo lo conectamos ahora a una salida? Vamos a actualizar nuestras salidas. En este momento solo voy a comentar nuestras salidas para que nada funcione en absoluto. De todos modos no está funcionando. Lo que podemos hacer aquí es que solo podemos actualizar nuestra posición Y. Nuestra salida.y.actual es nuestra salida.y.Fin menos nuestra entrada. Podemos ir desplazamente.Fracción, multiplicada por nuestra salida.rango. A ver si esto funciona. A medida que nos desplazamos, ¿pasa algo en absoluto? ¿ Te estás dando cuenta de algo? No, no me estoy dando cuenta demasiado. ¿ Sucede algo aquí? Bueno, ¿qué pasa con las salidas de actualización? El y.Corrientes está funcionando? Sí, debería estar funcionando, pero recuerda que en realidad tenemos que llamar a las salidas de actualización. Vamos a copiar esto o vamos a copiar las salidas de actualización y actualizar cada elemento de paralaje. Pongámoslo después de llamar a la actualización y poner función dentro de nuestro manejador de eventos HandleScroll. También podemos simplemente cortar esto y tal vez ponerlo justo aquí para que esté un poco más cerca de nuestro manejador de eventos HandleMouseMove. Ahí vamos. Ahora, veamos qué pasa a medida que nos desplazamos. Están pasando cosas. Se puede ver que el paralaje ciertamente está funcionando. Tenemos algo de desenfoque yendo, Tenemos algo de escala en marcha, y todo está relacionado con nuestra posición de desplazamiento. Hemos logrado lo que nos propusimos hacer en este video. Hemos conectado una entrada a una salida usando nuestra posición de desplazamiento. Se ve realmente bien. Hay un par de problemas con esto hasta ahora sin embargo, vamos a cubrir esto en el siguiente video. Te veré ahí. 11. Valores de entrada únicos para cada elemento: Nuestra experiencia de paralaje en el último video se ve bastante bien. Pero si miras de cerca, algo no va del todo bien. Te mostraré. Si voy todo el camino hasta la parte inferior de mi documento y comento estas entradas de actualización y funciones de salida de actualización, y dejo de escuchar los eventos de scroll. Ya verás que todas mis hojas o todos mis elementos de paralaje, están centrados en medio de la página. Entonces, si me desplaza un poco hacia abajo, también lo son estos. Ahora, cuando regrese en mi código por aquí y mi código por aquí, verás que todos los elementos de paralaje están en la parte inferior de la página. ¿ Por qué es esto? Bueno, va a haber dos razones por las que esto sucede. El primer motivo es que cuando nos desplazamos hasta nuestro cálculo actual de output.y, verás que empezamos con el y.end. Básicamente estamos diciendo, empecemos con el y.end y luego a medida que aumenta el valor de la fracción, así nos acercaremos cada vez más al valor de inicio. En cambio queremos decirlo, empecemos con el valor inicial y a medida que aumenta el valor de la fracción, vamos cada vez más cerca del valor final. Esto se ve un poco mejor, y ahora si nos desplazamos un poco más hacia arriba, veremos que cuando definamos nuestro valor de inicio, realidad empezamos en menos 150. Vamos a empezar esto a cero. Ahora, todo debe comenzar exactamente en el lugar correcto. Cuando nos desplazemos hacia abajo, veremos que estos artículos en este contenedor rosa, no empiezan en su lugar original. Eso es todo lo que queremos lograr en este video. Cuando llegamos a un elemento o cuando nos desplazamos a un elemento, queremos que esté en la posición original. El motivo de esto es que, estos ítems se están moviendo en base la fracción de desplazamiento de todo el camino en la parte superior a todo el camino en la parte inferior. Lo que quiero decir es, solo quiero que la fracción de desplazamiento sea cero sobre aquí y uno sobre aquí, en lugar de todo el camino por la parte inferior y todo el camino por la parte superior. No quiero que las salidas de cada elemento se basen en toda la posición de desplazamiento del documento. Yo quiero que se base en cuando sea visible. La pregunta que tenemos que hacer es, ¿ a qué fracción de desplazamiento debe estar un elemento en su posición original? Porque por el momento, solo están en su posición original cuando la fracción de desplazamiento está en cero. Entonces, ¿cómo solucionamos esto? El clave radica en nuestra actualización cada función de elemento de paralaje dentro de la matriz de ítems para cada bucle. Ahora para cada elemento realmente vamos a crear su propia entrada, así que entrada de elemento. Lo que podríamos hacer es que en realidad podríamos codificar duro cada entrada para cada elemento individual, esto tomará horas. Vamos a usar algún código para solucionarlo por nosotros. Ahora, nuestra entrada de ítem, vamos a tener YScroll, y dentro de nuestro YScroll, vamos a tener un inicio y vamos a tener un fin. Actualizaremos estos valores en un segundo. Lo siguiente que necesitamos es un rango, así que si nos desplazamos aquí arriba, ¿ dónde realmente trabajamos el rango? Bueno, es salida, aquí vamos, el scrolly.range, así que vamos a copiar eso y vamos a traerlo aquí abajo. En lugar de decir Input.Scrolly.Range, vamos a decir el ItemPut.Scrolly.Range y el ItemPut.Scrolly.End, menos el ItemPut.Scrolly.Start. Esto es realmente importante. Esto significa que podemos especificar un inicio y un final para cada elemento. Ahora mismo podemos codificar duro un valor. En lugar de ser cero podríamos decir, a 450, aquí es donde quiero que esté mi fracción cero y mi fracción final, quiero que esté a 800. Cuando me desplazé 800 píxeles por la página, quiero que mi fracción sea una, y cuando haya desplazado 450 píxeles por la página, quiero que mi fracción sea cero. Empecemos a cerrar sesión algunos valores. Lo que voy a hacer aquí es que voy a entrar en mi HTML y voy a comentar un montón de estos divs, sólo que tenemos un div con el que trabajar. Eso significa que solo tendremos un conjunto de troncos entrando. Entonces a medida que me desplaza, ¿funciona esto? Realmente no se parece, quizá no se está desplazando tan bien. Podemos simplemente verificar que no haya errores. Hay algunos errores, por lo que solo hacemos click en esto. Diremos, iteminput.scroll.end, eso es porque deletreamos Scrolly de manera diferente a YScroll. Cambiemos YScroll a Scrolly, ahí vamos. A medida que nos desplazamos hacia abajo, veremos que nuestra hoja está haciendo algún ligero movimiento. Lo que tenemos aquí es, tenemos nuestro rango de desplazamiento. ¿ Qué más tenemos que hacer ahora? Tenemos que trabajar nuestro valor de fracción. ¿ Dónde trabajamos nuestro valor de fracción? Bueno, lo solucionamos por aquí. Tenemos nuestra fracción scrolly, así que vamos a copiar y pegar eso, y diremos iteminput.scrolly.Fracción es igual, y esto es realmente importante. Todavía lo vamos a basar fuera de la entrada global.scrolly.current, que se basa en el desplazamiento de las páginas, pero vamos a decir menos el ItemPut.Scrolly.Start, y vamos a dividirlo por el ItemPut.Scrolly.Range. Súper importante. Lo siguiente que tenemos que hacer es descifrar una nueva salida. Por el momento estamos usando las salidas globales y estamos haciendo algunos cálculos aquí. Vayamos a nuestras salidas, y veremos esa salida.La corriente se calcula por aquí. Entonces simplemente crearemos una nueva variable aquí, y diremos si nuestro ItemOutputyCurrent, porque ya tenemos un ItemOutput. El hecho de que solo necesitemos un valor significa que no tenemos que usar un objeto, y aquí podemos decir outputy.start, que es genial porque todavía vamos a usar nuestros valores de salida.Start y end, y luego en lugar del scroll de entrada fracción, vamos a ir por la fracción de desplazamiento de entrada de ítem. Entonces tenemos nuestro ItemOutputyCurrent, ahora podemos aplicarlo a nuestro valor y aquí abajo. El caso es que, nuestra salida.y.current, actualmente es un poco inexacta. Si nos desplazamos hacia abajo, y tal vez podamos simplemente comentar estos elementos de nuevo adentro. A medida que nos desplazamos hacia abajo, realmente no lo puedes ver tan bien aquí, así que aumentemos nuestro valor final a algo así como 3,000. A medida que nos desplazamos aquí abajo, verás que los artículos que están más lejos en realidad se están moviendo con bastante rapidez. Realmente no queremos que se muevan rápidamente o parezcan moverse rápidamente. Si cambiamos esto a 1,000, quizá puedas verlo un poco mejor. A medida que me desplaza hacia abajo, realmente no quiero que los artículos que están más lejos aparezcan como si se estuvieran moviendo más rápido. Como dijimos en el video anterior, realidad quiero que los artículos que están más lejos se muevan más rápido en la dirección opuesta lo que significa a medida que me desplace hacia abajo y el documento se mueve hacia arriba, quiero que esos ítems que están más atrás se muevan hacia abajo a un ritmo más rápido. Vamos a probar esto. Aquí abajo donde trabajamos nuestra posición y. En lugar de empezar con las corrientes y y reducir la corriente y multiplicada por la profundidad, sólo voy a empezar con las corrientes y y multiplicar la profundidad. Esto significa que cuanto más profundo sea, más rápido se va a mover. Vamos a probar esto. A medida que me desplaza, ¿pasa algo? No. Eso se debe a que seguimos usando nuestra salida y corriente. Usemos nuestro producto de salida y actual, y esto va a ser por artículo. Ahí vamos. Vamos a empezar en un rango de 450 y terminar en un rango de 800. Ahora, a medida que me muevo, verás que las cosas se ven un poco mejor, y como estamos desplazando entre 450 y 800, no necesitamos usar este valor masivo por aquí, así podemos cambiar esto de nuevo a 300. A medida que nos desplazamos, ahí vamos. Las cosas se ven un poco mejor. Si cambiamos esto a 500, quizá podamos ver un poco más. A medida que nos desplazamos, verás que el elemento superior va realmente con la página a medida que se desplaza hacia arriba. Entonces los artículos que están más lejos en realidad se están moviendo hacia abajo mientras nos desplazamos hacia abajo. La página va hacia arriba, nos estamos desplazando hacia abajo y los elementos que están más lejos se desplazan hacia abajo, moviéndose hacia abajo a la misma velocidad o más rápido que los artículos que están más cerca de nosotros. Es un poco complejo. Ahora volvamos a nuestro bucle. Lo que está pasando aquí es que estamos estableciendo el inicio y el final. Sólo voy a comentar de nuevo estas dos secciones. Acabamos de tener una hoja o un artículo de paralaje. En realidad podemos hacer algún registro de consola aquí. Voy a copiar esto. Entonces voy a ir a nuestro insumo. Entonces voy a iniciar sesión nuestro pergamino actual. Vamos por scroll y luego copiaré esto y pegaré esto. Abramos una Consola y entonces ya no queremos la profundidad. Pero lo que sí queremos es que queremos la fracción. Loguemos esto. Ahí vamos. A medida que nos desplazamos por este ítem, cuando estemos aquí, verás que la fracción es un 1.26 negativo. ¿ Raro? Pero echa un vistazo a esto. A medida que nos desplazamos y verás que la posición de desplazamiento está aumentando, verás que el valor de la fracción está realmente cerca ahora. Cuando llegamos a un valor de 450, ahí vamos. El fracción es cero. Cuando llegues a un valor de 800, verás que la fracción va a uno o justo por encima de uno. Esto significa que Se está moviendo entre el valor inicial y final que hemos especificado en nuestra salida. Como moverse entre cero y 500, entre un rango o un rango de desplazamiento de 450 y 800. Esto es super, super cool. Ahora no queremos que todos los artículos comiencen en 450 y terminen en 800. Queremos empezar donde es visible y terminar cuando no es visible. ¿ Cómo hacemos esto? Bueno, una de las mejores maneras en que podemos hacer esto es decir, item.offsetParents.offsetTop. Un padres compensados es realmente importante. En nuestro CSS, verás que se declara nuestra posición relativa. Esto significa que se trata de un padre offset. Significa que cualquier cosa que tenga una posición además de estática es un offset padres. Dentro de nuestro contenedor de paralaje tenemos nuestros artículos de paralaje. Un ítem de paralaje, dirá: “¿Quiénes son mis padres compensados?” y el contenedor de paralaje dirá: “Yo, yo soy”. Después trabajaremos el offset superior, la distancia desde el contenedor de paralaje hasta la parte superior del documento, y ese será nuestro valor máximo que es bastante genial. Lo siguiente es sentarse de punta. Tomaremos esto y lo haremos nuestro final pero vamos a añadir la ventana.InnerHeight, así. Vamos a decir, vamos a empezar en los offsetParents.offsetTop. La distancia entre los padres offset y la parte superior del documento y el final va a ser esa distancia entre la parte superior de los padres y la parte superior del documento más la ventana.InnerHeight. Bastante cool. Echa un vistazo a esto. A medida que me desplaza, debería llegar a alrededor de aquí, que es una fracción de cero, posición de desplazamiento de 319. Aquí es donde va a estar nuestro artículo de paralaje. Cerremos esto, y haremos exactamente lo mismo aquí. Echa un vistazo a eso. Bastante cool. Si solo deshacemos y deshacemos, básicamente comentando en todos nuestros ítems de paralaje. Ahora, va a empezar en medio aquí. A medida que nos desplazamos hacia abajo, verás que cuando lleguemos a esta posición aquí mismo, oye, también va a estar en el centro exactamente donde lo pusimos originalmente lo cual es fantástico. Si no quieres usar los offsetParents.offsetTop, está bien. Pero lo que es realmente importante es que usas algo que no cambia su posición porque si estás calculando dinámicamente los valores de inicio y final y lo estás basando en algo que está cambiando su offsetTop, las cosas pueden ponerse realmente, realmente desordenadas y confusas muy rápidamente. De esta forma, si tan solo tenemos que copiar y pegar un montón de este código y ponerlo en nuestro siguiente contenedor de paralaje y nuestro siguiente contenedor de paralaje. Podemos cambiar un montón de estos valores. Podemos cambiar esto de activo uno a quizás 60 y 61 y 67. Bajemos aquí, cambiaré esto a 2-1 y a cero. Cambiaremos esto a 11-21-41. A medida que nos desplazamos hacia abajo, veamos qué pasa. Está bien. Todos ellos apareciendo exactamente en el lugar correcto a medida que llegamos al padre offset estando en la parte superior de la pantalla lo cual es fantástico. Eso es realmente genial, y te animaría a usar ese offsetParents.offsetTop para que las cosas estén exactamente donde las configuraste originalmente. Por supuesto que no tienes que usar la escala y no tienes que usar el desenfoque. Simplemente hacen que las cosas se vean un poco más realistas. Eso es básicamente todo lo que necesitas saber sobre el paralaje de desplazamiento y el uso del efecto paralaje con un mouse move events. Bien hecho. Te voy a mostrar algunas cosas más antes de codificar realmente toda una experiencia, eso no son solo ejemplos. Dulce, nos vemos en el siguiente video. 12. Usa el ratón y la posición de desplazamiento: Es posible que te estés preguntando si puedes usar la posición del mouse y la posición de desplazamiento juntos para cambiar el efecto Parallax. La respuesta es, sí. En este video, te voy a mostrar cómo. Si nos desplazamos hasta el fondo, vamos a descomentar nuestra pieza de código que comentamos. Básicamente estamos diciendo: “Vamos a escuchar de nuevo el evento de movimiento del ratón”. Por suerte, no hemos eliminado ninguno de nuestro código. Sólo tenemos que movernos aquí arriba. Podemos simplemente comentar esto de nuevo adentro. Pero nuestro y.current se ha cambiado para que funcione para la posición de desplazamiento. Lo que vamos a hacer es, vamos a subir aquí y vamos a poner un nuevo valor. Pongamos un objeto así, y solo voy a copiar la corriente de inicio y fin de x, y la y que vamos a llamar a ScRolly. Ahora necesitamos crear y copiar y pegar un montón de los valores que usaron la posición y a lo largo de nuestro código. Empecemos de nuevo por aquí. Podemos decir ScRolly, y sólo actualizaremos eso. Después consiguió un montón de insumos, lo cual es genial. Entonces nuestra salida por aquí, podemos actualizar input Scrolly, output.scrolly range. Entonces tenemos nuestra salida.Scrolly start, output.scrolly range. Creo que eso es todo. Fantástico. Solo verifiquemos dos veces que esto se esté moviendo. Se puede ver que esto está respondiendo a nuestro movimiento del ratón en el eje x y está respondiendo a nuestro desplazamiento en el eje y. Ahora lo que quiero pasar es, a medida que me desplaza hacia arriba y hacia abajo, y a medida que muevo el ratón hacia arriba y hacia abajo, quiero que el eje y o el eje vertical respondan a ambos. ¿ Cómo hacemos esto? El clave yace en este pedazo de código aquí mismo. Esta pieza de código que acabo de destacar, esta es nuestra pieza de código de desplazamiento. Lo siguiente que quiero agregar aquí es algún código que eliminamos en el video anterior. Voy a decir output.y.current, y tal vez sólo puedas asegurarte de que todo esto esté frenado para que sepamos que estos son separados. salida.y.actual, voy a decir menos, y frenar esto de nuevo, salida.y.corriente multiplicada por profundidad. Tenemos nuestro valor de desplazamiento por aquí, y luego tenemos nuestro valor de ratón por aquí, y los estamos sumando juntos. Echa un vistazo a eso. Ahora mientras me desplaza, se ve bastante bien. Agradable. En ocasiones estos elementos de paralaje invaden las otras áreas de artículos de paralaje. Una forma realmente fácil de arreglar esto es ir a tu CSS, y podemos decir contenedor de paralaje, solo podemos configurar esto para desbordar oculto. Al igual que cuando nos desplazamos, simplemente se esconde detrás. Ahí vamos. Es así como usas la posición del mouse y la posición de desplazamiento en el mismo documento. Es realmente genial, muy divertido usar ambos al mismo tiempo. 13. El código de otras personas: Hablemos de usar código que no escribiste. Esto podría ser usar un plugin, usar algún código que copiaste de internet, o usar algo como jQuery. Muchos plugins y frameworks son simplemente increíbles. Están hechas por personas súper ingeniosas y nos hace la vida mucho más fácil. Es como externalizar parte de tu codificación a otra persona. Hay plugins hechos para desarrolladores y plugins hechos para el público en general. plugins para desarrolladores hacen que la codificación sea más fácil y estandarizada. También tienden a enfocarse en partes específicas del proceso y te permiten manejar el resto. Plugins que se hacen para el público en general o plugins que dicen: “¡Lo hacemos todo!” y generalmente bastante escéptico, y puede que tengas que pasar horas leyendo su documentación y pautas para que cualquier cosa funcione. El inconveniente de la mayoría de frameworks y plugins es que mucha del tiempo no necesitarás usar todo lo que tiene para ofrecer. Esta es la equivalencia de comprar un juego de herramientas y solo usar un martillo. Además, si el plugin que estás usando no hace exactamente lo que quieres, entonces estás atascado. Tendrás que empezar de cero. Todo lo que tienes que hacer algo de hack-work que a menudo termina tomando mucho más tiempo que una buena planificación y código escrito a mano. Después hay código escrito por otras personas. Puedes encontrar este tipo de código en medio, en publicaciones de blog, en Stack Overflow, donde sea. A veces este código es fantástico, nada de malo, es increíble. Otras veces no es genial en absoluto. El mejor tipo de código para ti es el código que entiendes y te aseguras de que funcione para tu proyecto y tus navegadores que intentas apoyar. 14. Reunirlo todo: Te he mostrado un montón de cosas, muchas sobre entradas, salidas, y el efecto de paralaje. Ahora te toca crear algo. No te presiones para crear un gran sitio web usando todo lo que has aprendido en la clase. Toma partes de lo que te he mostrado y haz un pequeño proyecto o haz algunos pequeños proyectos, o simplemente trabaja en ello diariamente. Cuando estés listo para compartirlo con tu mamá, con el mundo, y con nosotros, entonces manda a través de un enlace de algo que hayas hecho. Puede estar en CodePen o podría hospedarse usando Surge, GitHub Pages o incluso tu propio sitio web. Si necesitas ayuda, recuerda compartir un enlace a tu código. En el resto de este video, voy a crear un pequeño proyecto propio usando algunas cosas que he enseñado en la clase. He incluido esto para demostrarte que no soy perfecto. El desarrollo es duro. Ya verás que cometí errores y que a veces olvido cosas bastante importantes. Pero espero que esto te muestre cómo sucede el desarrollo real y espero que esto te inspire a crear, a jugar, y a experimentar sin la presión de ser perfecto. Voy a echar un vistazo rápido en mi planeación y lo que tengo es un contenedor con un montón de hojas diferentes en él. Todas estas hojas van a ser artículos de paralaje. Van a tener profundidades diferentes. veces van a estar un poco borrosas, pero no se van a escalar. Van a tener tal vez un ancho y alto aleatorios, y cada hoja se va a generar aleatoriamente por JavaScript porque no me apetece meter, que muchas hojas dentro de mi HTML y definitivamente no me siento como peinándolos. Van a tener una rotación aleatoria, una borrosidad aleatoria o una profundidad aleatoria, y todos van a ser elementos de paralaje. Entonces encima de este contenedor, va a haber unas plantas de paralaje con entradas de correo electrónico y un botón de registro y eso va a ser todo. Vamos a agrietarnos. Lo que tengo es que tengo un par de valores de color que me gustan mucho. Empecemos con este cuerpo. Yo quiero un cuerpo oscuro, así que tal vez vayamos por negro, bgc, puede ser negro y también voy a poner un margen a ceros. No hay margen alrededor de mi cuerpo. Vamos a conseguir un ejemplo, hoja yendo y es de un contenedor de paralaje. Dentro de mi contenedor de paralaje quiero un elemento de paralaje, y luego dentro de aquí podría tener una imagen, pero en realidad voy a poner la imagen en el fondo. Vayamos por.leaf. Entonces va a tener una imagen de fondo aleatoria. Pero lo haremos todo en CSS, elemento de paralaje y contenedor de paralaje. Vamos a copiar estos en mi CSS. Al igual que así. Esto va a tener un ancho de 100 vh y luego altura de 100 vh, mi ancho sería un 100 vw en realidad. Por lo que 100 vw, un 100 vh para mi contenedor de paralaje en posición de relativo. Entonces mi ítem de paralaje estará en posición absoluta. Entonces por ahora podemos tener un ancho de 300 píxeles, altura de 300 píxeles, y podemos tener un margen superior de menos 150 píxeles. No, no creo que realmente necesitemos eso, sólo necesitamos eso. Tenemos nuestra posición, tenemos nuestro ancho, tenemos nuestra altura. ¿ Qué necesitamos a continuación? Posicionar absolutos, tal vez sólo puedas decir, top del 50 por ciento y left del 50 por ciento. Arriba, ancho izquierdo, altura. Vamos por nuestra hoja y esto puede tener un ancho del 100 por ciento y una altura del 100 por ciento. Puede tener un fondo, y el fondo va a ser una URL. Uno de los activos va a ser una de estas hojas. Vamos a copiar este, pegarlo ahí, y dirá centro sin repeticiones y luego se puede contener el tamaño de fondo. Ya me gusta eso. Solo comprobemos que esto es en realidad lo que queremos. Vamos por un color de fondo de amarillo. Sí, eso se ve genial y luego mi artículo de paralaje, top 50 por ciento. Ahí vamos. Eso es genial. Vamos a aleatorizar la parte superior y la izquierda de cada elemento. Todos van a tener unos 300 píxeles de alto y ancho. Podemos cambiar eso para hacerlos cada vez más grandes. Se puede quitar esto. Ahora, vamos a meternos en algo de Javascript, pero lo que quiero hacer aquí, bueno, quiero armar todas mis hojas. Lo que voy a hacer aquí es que voy a generar aleatoriamente un montón de hojas y salpicaduras diferentes, lo que sea. Vamos por un montón de argumentos. Hagamos algo. Vamos var i es igual a 0. Entonces voy a decir, mientras yo es más pequeño que, digamos 10 por ahora, entonces voy a decir i plus, lo que significa que aumenta de valor. A lo mejor puedes simplemente cerrar esto, esto no es tanto jarring como estamos escribiendo. Dentro de aquí, ¿qué quiero hacer? Para escribir algunos comentarios. Bueno, en primer lugar, quiero crear un nuevo elemento, crear una nueva hoja para los elementos interiores, luego agregar elemento al contenedor. Entonces después de eso, quiero decir al azar ancho, altura, profundidad. ¿ Qué más quiero, rotación, imagen de fondo. A continuación, ajusta el desenfoque en profundidad. Eso se ve bastante bien. Lo que voy a hacer aquí es poner rápidamente un id en este div y va a ser contenedor de paralaje. También quiero agregar los nombres de las clases. Probemos esto. Lo que quiero hacer aquí es decir var paralax container es igual documento dot get element by Id y este va a ser mi contenedor paralax. Crea un nuevo elemento con un nombre de clase de ítem de paralaje. Vamos por documento punto crear elementos, y quiero ser un div y vamos a decir elemento var. Entonces lo que vamos a hacer es darle a ese artículo un nombre de clase. Aquí vamos a hacer lo mismo, así que vamos a crear una hoja y decir que esto es una hoja. Entonces vamos a agregar la hoja a los elementos, por lo que punto elemento anexar hoja hijo luego agregar elemento para contener. Parallax container dot add append child y vamos a poner en artículo. A ver si eso funciona ahora. Tengo dos aquí. Tengo un montón de hojas pasando aquí, eso es fantástico. Lo siguiente que quiero hacer es solo comprobar dos veces que estos estén en realidad posicionados absolutos. Parece que deberían serlo. Hagamos clic derecho e inspeccionemos la hoja. Todas las hojas se están agregando al contenedor de paralaje y solo hay un elemento de paralaje. Decir crear elemento, que es un elemento documento punto crear elemento div, el nombre de la clase de elemento es hoja. El nombre de la clase de elemento es elemento paralaje, hoja punto nombre de clase es elemento hoja anexar hoja hijo y luego contenedor paralax pellizcar alt item. Si hacemos click derecho en este ahora, deberíamos ver un montón de artículos paralajos todos con hojas dentro de ellos. Eso es genial. Lo siguiente que quiero hacer es que quiero obtener un ancho aleatorio, alto, profundidad, relación, imagen de fondo, todo eso. Vamos por el elemento punto estilo punto ancho de punto es igual a 300 altura. Vamos por profundidad, rotación e imagen de fondo, así que altura. Entonces vamos a ir por la profundidad después por la rotación, por lo que ésta será profundidad. Esta será una profundidad de punto conjunto de datos de puntos, entonces vamos a decir rotación. Esto no estará ahí, se transformará y luego la final será una imagen de fondo, por lo que la imagen de fondo y vamos a obtener esta imagen de fondo por aquí. Entonces necesitamos un número aleatorio, así que crearé var número aleatorio igual a punto matemático aleatorio. Entonces nuestro ancho va a ser, vamos por 600 multiplicado por el número aleatorio, que nos dará un valor entre cero y 600 y luego más 300. Si es cero, entonces serán 300 o tal vez puedas decir más 200, y tal vez podamos decir que éste es 500. Obviamente, estos se van a resolver primero, así que démosles unas llaves, la profundidad va a ser un número aleatorio, y eso va a ser sólo entre cero y uno. Entonces me transformaré. ¿ Qué queremos aquí? Queremos algo entre 0 y 360. Vamos al 360 multiplicado por un número aleatorio y luego nuestra imagen de fondo, queremos una de estas entre 1 y 91. Vamos a probarlo. Para mi número de imagen BGIMG, quiero mi número aleatorio multiplicado por 90. De todos modos, entre 90, pero voy a decir, bueno, vamos a ver qué es eso en realidad. Solo pongamos dos por ahora, número de imagen BGimg. Abramos nuestra consola, así que estamos 64 puntos lo que sea. Lo que podemos hacer aquí es que puedes decir matemática punto redondo y esto nos dará seis. Fantástico. ¿Por qué no acabamos de cerrar la sesión? Consola dot log número BGIMG y esto debería darnos un montón de números BGIMG diferentes. Eso se ve bastante bien y cambia a 91 creo, debería estar bien. Entonces podemos poner aquí nuestro número BGIMG y podríamos haber hecho lo mismo con este cálculo aquí, tal vez deberíamos probar eso. Vamos a poner esto aquí arriba. Quitémoslo y digamos rotar número y copiar y pegar eso. Podemos hacer lo mismo con todos estos en realidad, pero a veces es innecesario. No parece que esté recibiendo plantas al azar, no realmente no. ¿ Existe realmente la imagen de fondo? Haga clic derecho aquí e inspeccione elemento de paralaje, eso es porque tenemos que ponerlo en nuestra hoja. Digamos elemento de fondo de punto de hoja, ver si eso cambia algo, imagen de fondo de punto estilo div. Profundidad punteada, transformar girar. mejor necesitamos hacer algunas investigaciones sobre cómo poner una imagen de fondo en un elemento con JavaScript. Vamos por la imagen de fondo de JavaScript. Imagen de fondo. Porque no pusimos una URL en. Probemos eso. Voy a decir URL, y como algunos o así. ¿ Qué tal eso? No entendáis lo que estáis diciendo. Toda esta URL, una de estas, vamos a poner eso ahí. Parece que tenemos algunas imágenes de fondo aleatorias. Fantástico. Muchas gracias escuelas W3. Boom, ¿qué sigue? Bueno, tenemos que resolver nuestra borrosa. Vamos por item.style.filter equivale a desenfoque de 20 píxeles. Ahí está pasando un montón de desenfoque, y ya tenemos nuestra profundidad. ¿ Dónde está nuestra profundidad? Aquí está nuestra profundidad. A lo mejor podemos decir var profundidad igual al randomNum, y podemos decir, vale, ¿qué es lo voy a desenfocar el valor? desenfoque de Var es igual a nuestra profundidad. Necesitamos un valor de inicio aquí, así que voy a decir output.blur.start, y luego multiplicar por el output.blur.range. Ahora, obviamente no tenemos estos valores, así que vamos a configurarlos. Se va a decir configurar salida y la salida var es igual, y nuestra salida va a ser desdibujada, y vamos a tener un inicio de 0.2 y el rango de 20. ¿ Qué tal eso? Inicio y rango de desenfoque de salida. ¿ Qué pasa si cambiamos esto a cinco? Entonces, ¿qué pasa? Si tenemos que decir empezar por una, espero que todos estos no sean borrosas. Eso no funciona. item.style.filter desenfocar 20 píxeles, eso se debe a que todo es solo 20 píxeles ahí. Cambiemos esto a un valor de desenfoque. Ahí vamos y podemos apagar desenfoque aparecen con todas las demás variables. Cambiemos de nuevo nuestro inicio a 0.2 y nuestro rango a 20. Esperemos que veamos algunos de estos siendo borrosas y algunos de ellos no. Entonces tal vez pueda cambiar mi ancho a, no sé, 50. Entre cero y 500 y sí, el mínimo será de 50. Item.Style.Filter desenfocar, puedes poner eso ahí arriba. Eso se ve bastante bien hasta ahora. ¿ Qué más necesitamos hacer? Tengo un desenfoque, tengo un aleatoriamente para spludge, tengo ancho y alturas aleatorias, tengo profundidad y desenfoque aleatorios. Ahora, supongo que necesito una posición aleatoria. No creo que haya puesto eso en realidad. Vamos por item.style.top es igual y podemos decir, ¿dónde está este RandomNum multiplicado por, y podemos decir window.InnerHeight. Enfriar, y luego window.InnerWidth para mi valor izquierdo, y luego vamos a simplemente agregar unos píxeles a eso. Entonces puede que tengamos que redondear esto. No del todo seguro, pero hagámoslo de todos modos sólo para que no tengamos ningún valor de punto. Inspeccionemos esto. Ahora, hemos transformado los filtros hacia arriba a la izquierda. Pasando un montón de cosas. Bueno, eso es fantástico. Pero tal vez también podamos simplemente decir matemática.Ronda menos 200 también, y eso es solo para que el artículo sea ir un poco a la izquierda y un poco a la parte superior. De lo contrario, siempre van a la derecha y al fondo de la página. Entonces también podemos poner un desbordamiento oculto en nuestro contenedor de paralaje para que no tengamos barras de desplazamiento. Tenemos posiciones aleatorias ahora creo que necesitamos hacerlas moverse. Hagamos que se muevan. Configuremos nuestro insumo y compartimos. A lo mejor podemos decir configuración HTML. Nosotros también vamos a sumar los puntos y comas. Nuestro insumo va a ser MouseX y Mousey. Entonces vamos a tener, voy a empezar en cero y siempre hago esa ventana.InnerWidth, y luego nuestra corriente. Podemos simplemente empezar en ventana.InteriorAncho multiplicado por 0.5, y luego necesitamos un rango que funcionará después. Podemos simplemente copiar y pegar esto. Entonces decimos Input.Minusx.Range equivale a entrada.Mousex.Fin menos. Sólo copiemos y peguemos eso. Inicio. Estas cosas me están asustando. Tenemos nuestra configuración de entrada. Ahora, lo que sigue es que necesitamos hacer a nuestros oyentes de eventos. Entonces tal vez podamos simplemente ocultar esto por ahora, y podemos decir window.AddeventListener, y podemos decir mousemove, handleMouseMove. Entonces también podemos agregar un mango de redimensionar, redimensionar. Cambiar tamaño y no sé del todo por qué hablé manejar así. Pero lo hice HandleMouseMove. Podemos decir HandleReSize. Qué tiene que pasar en nuestro redimensionamiento. Tenemos que hacer nuestra gama. Terminaré con nuestro rango, eso está bien. Entonces me encargaré de LeMouseMove. ¿ Qué pasa en ahora HandleMouseMove? Tenemos que hacer fracción de entrada y corriente, y luego salidas actuales y luego aplicar a HTML. Vamos por nuestros UpdateInput, que es una función, y podemos simplemente copiar y pegar esto y decir UpdateOutput, así, y luego podemos decir UpdateParallaxItems. Podemos simplemente copiar y pegar estos, fantásticos. Lo que primero necesitamos hacer en actualización-insumos es, las corrientes y nuestra fracción. Hagámoslo, actualización-insumos. Lo que vamos a conseguir es, conseguir nuestros eventos y decimos mouse dot x igual a event dot client X. Aún no hemos configurado nuestro mouse, así que no podemos hacer eso. Ratón Var es igual a 0 o tal vez se puede decir, ventana punto interior ancho multiplicado por 0.5. Podemos copiar eso para nuestro valor y y decir alturas interiores. Si solo cortamos esto y lo ponemos en la parte superior, realidad podemos hacer referencia a eso, así que es un punto de ratón x y mouse dot y Lo siguiente que tenemos que hacer es copiar y pegar esto, mouse dot y es nuestro cliente Y. Lo siguiente que tenemos que hacer es, somos valores de fracción de corte, así que vamos y en realidad esto no va aquí, esto va aquí abajo, y esto va aquí abajo, allá vamos. Entonces en realidad podemos actualizar nuestros valores actuales input mouse X dot current es igual a mouse dot x, y poner dot mouse Y, la corriente va mouse dot y. entonces nuestro valor de fracción, input dot mouse X dot fracción, y esto equivale a la corriente menos inicio dividido por rango. Ponemos estos dentro de llaves, y cambiamos esto a ratón Y. Hemos hecho nuestras entradas, eso es genial. Ahora salidas. ¿ Qué vamos a hacer para nuestras salidas? Bueno, tenemos que hacer son x e y. vamos por punto de salida x. ¿Tenemos una x ya? No, no lo hacemos, así que la escala para x, y tendremos un inicio de menos 150, y un final de 150, y luego una corriente de cero. Copiaremos y pegaremos esto, y cambiaremos esto a y y luego solo copiaremos y pegaremos esto, y cambiaremos a x, x, x y esto a y, y, y esto a salida. Ya. Ahora tenemos nuestra salida x e y. Lo siguiente que tenemos que hacer es realmente continuar aquí y decir, la corriente de punto es igual, y nuestro valor actual va a ser fracción de punto de entrada Mouse-x puntos multiplicada por el rango de punto x puntos de salida. Bastante cool. Probablemente no necesitamos hacer esto, pero lo voy a hacer de todos modos. Hace la vida un poco más fácil, por lo que la fracción Y de ratón-Y de corriente, y el rango de punto de salida y. Ahora hemos puesto nuestras salidas. El siguiente es, que necesitamos aplicar al HTML. Lo que he hecho aquí arriba es, he configurado el HTML, pero no lo he agregado a una matriz. Digamos que items-array es igual a una matriz en blanco. Entonces lo que quiero hacer es, var elemento cuando lo creo, y hago el nombre de clase, y diré items-array dot push, y solo agregaré este elemento a esa matriz. Entonces puedo referirme más tarde, así que items-array, vamos a bajar a aquí. Items-Array dot ForEach, y dentro de este ForEach proporcionan un elemento de función y k o ítem e i. Entonces lo que puedo hacer es, puedo crear una var Item-Salida igual a un objeto, y habrá una x, habrá una y. Eso en realidad va a ser, sólo mi x e y. entonces voy a decir ítem dot styles dot transform igual traducir, y luego diremos 20 pixels, 20 pixels. Entonces también voy a tener una profundidad, así que var profundidad es igual al elemento punto conjunto de puntos de profundidad. Voy a decir ParseFloat. Probablemente no necesitamos hacer esto porque en realidad estamos generando ese número aquí arriba. Podríamos almacenar eso en el artículo en sí pero creo que esta es solo una buena manera de ponerlo en HTML, y traerlo de vuelta solo para cementar lo que ustedes han aprendido durante la clase, así que esa es nuestra profundidad. Sólo vamos a poner en ese valor 10. Tenemos nuestra profundidad, tenemos nuestro artículo-salida. Hagamos que esto sea dinámico. Empezaremos con nuestro punto de salida x-corriente y luego lo multiplicaremos por nuestra profundidad. Entonces las cosas así, alguien se ve un poco apagado. Creo que podría tener que ver con este valor aquí arriba. Creo que en realidad podría tener que empezar con salida punto x punto inicio más este valor. Eso se ve bien y entonces haremos lo mismo aquí. Ya que este será nuestro valor y, aún así poner llaves por aquí. Entonces nuestra x sería nuestra salida x punto actual [inaudible] es actualmente, multiplicada por la profundidad. Vamos a revisar dos veces. Ahora vamos a copiar y pegar esto. Corriente de punto y de salida, es más o menos lo mismo. Entonces podemos poner esto al punto x y luego copiar y pegar todo eso. Diga Item-salida punto y. ojalá eso debería funcionar. Todo un montón de cosas que no están pasando, no parece que incluso esté reconociendo que estoy moviendo mi ratón, así que vamos a View Developer Javascript Console, no puede establecer la transformación de propiedad de indefinido. Eso son estilos de punto de artículo. Estilos definitivamente no funciona, así que vamos por el estilo de punto de elemento. Guarda mi pluma, así que las cosas están funcionando aquí. En realidad puede quitar esto, así que solo comentaremos esto. Parece que aquí está pasando mucha rotación. Echemos un vistazo a nuestra rotación. Nuestra rotación creo que no está funcionando, porque lo hemos puesto a nuestro artículo. Cuando fuimos por esta rotación, cada vez que estas imágenes se mueven por aquí, significa que sobrescribe eso. Cambiemos esto a nuestra hoja. A lo mejor podemos simplemente echar un poco el desenfoque. Vayamos a la salida borrosa, hagamos este 10, y cambiemos esto a cinco. Entonces donde configuré mi HTML, solo voy a cambiar esto a 50, esto ahora va a ser 50 hojas y splotches y lo que sea. Realmente no parece que estén posicionados al azar. Parece que solo están posicionados de arriba izquierda a arriba derecha. Es raro. Si vamos por arriba e izquierda, InnerHeight, InnerWidth, sí, eso es sólo raro, así que tal vez loguemos esto, digamos yo, dimensiones, solo iré por arriba e izquierda. Entonces vamos por nuestra Consola Javascript Desarrollador. El problema es que, lo que está pasando es, a medida que aumentan los ítems, así aumentan los valores superior e izquierdo, dándole así realmente incluso extenderse de arriba a abajo derecha. Entonces lo que voy a hacer aquí es, en lugar de depender de este número aleatorio por aquí, solo voy a copiar y pegar eso y usar RandomNum único para la parte superior izquierda, la transformación, el ancho y la altura. En realidad solo voy a usar Math.Random en todo el show. Entonces diremos, RotaNumer. Pongamos eso ahí abajo también. Entonces, RandomNumber, ¿ya existes? Profundidad sigue siendo Randonumer. O simplemente podemos cambiar eso y eso debería ser todo, no más números aleatorios. Por lo que ahora tenemos un montón de hojas, lo cual es bastante guay. Se mueven mucho algo no parece justo aquí. ¿ Cuál es el asunto? Bueno, creo que tiene algo que ver con la nuestra corriente que empezamos por el inicio, y entonces estamos diciendo el MouseX. fracción, multiplicada por el rango comenzando en el rango. Entonces quizá pueda decir final -y final-, y ver cómo funciona eso. Entonces nuestra x es nuestra salida x.current multiplicada por la profundidad. Eso se ve mucho mejor. Bastante de eso. Cambiemos de nuevo nuestros valores de golpe. Empezar en 0.5, bueno decir empezar en 0.35 y nuestro rango podría ser de hasta 16, y lo único que no hemos hecho es nuestra Z y X, Así que tenemos que hacer nuestra Z. Así que podemos resolver esto y decir var ZIndex es igual a nuestro rango Z. Entonces podemos decir, output.z.range, que aún no hemos configurado, menos nuestra profundidad multiplicada por output.z.range, vamos a hacer eso. Diez mil, eso se ve bastante bien. Así rango de rango. Ahora vamos a configurarlo item.Style.zIndex es igual a zIndex. Entonces, ¿ves lo que pasó ahí? Cambiar el tamaño de las cosas realmente no funcionan tan bien. Actualicemos eso. Entonces en mi redimensionamiento y en rango, vamos a ir por Input.Mousex.End es igual a window.InnerWidth. Mousey es InnerHeight. Entonces podemos copiar y pegar no nuestra salida, sino nuestros rangos de entrada aquí abajo. A ver si eso funciona mejor. Eso se ve bastante bien. Es un poco de lío sin embargo. Entonces tal vez podría seleccionar un poco mejor mis imágenes, o tal vez podamos simplemente reducir el desenfoque nuevamente. Algo de ello aquí desde 0.2 y digamos 10. Sí, es bastante aleatorio en cuanto a lo que aparece, y te apuesto que si me quitara todo el desenfoque, sería mucho más performante. Entonces si vamos y encontramos el desenfoque. Entonces style.blur o style.filter, este de aquí. Basta con comentar esto. Eso se siente mucho mejor. Me pregunto si puedo cambiar esto a un porcentaje, la parte superior e izquierda en lugar de ser píxeles reales. Entonces cambiemos esto a un por ciento. Entonces matemática.Al azar multiplicado por 100, menos, digamos 10, y esto significa que funcionará sin importar cuál sea la altura y el ancho de la ventana y si se redimensiona. Cambiemos las cantidades de elementos que nos han de gustar 100 o algo así. A lo mejor podemos incluso decir menos un poco más aquí, así que menos 20 por ciento. Sí eso se ve bastante bien. Me gustaría ver cuántas hojas puedo realmente poner aquí. A lo mejor vamos por 150. Es como un volteo Jungle aquí, sí eso es realmente genial. A lo mejor podemos simplemente disminuir ese marcador 130. Aquí está pasando mucho movimiento. Lo que necesito hacer ahora, necesito poner en el resto de mi HTML. Vamos por ParallaxContainer, y encima de esto, voy a poner en mi form-container, realidad deletreo contenedor derecho. Dentro de aquí tendré un formulario, y dentro de mi formulario, voy a tener una entrada con un tipo de texto. Realmente no necesitas un ID de nombre ahora mismo. Entonces un tipo de entrada de enviar. Decimos, Regístrate y puede dar como valor de positor de, Dirección de correo electrónico. Fuera de nuestro formulario podemos tener un dicho h1, Parallax Plants Newsletter y h2 dice, Por favor, inscríbase. Ahora solo podemos darle estilo a esto. Vamos por nuestro forma-contenedor, y diremos que el ancho es del 100 por ciento. Diremos que la altura es del 100 por ciento. O tal vez solo diremos 100vw y 100vh. Entonces diremos posición absoluta y cero superior, cero izquierdo. También podemos entonces establecer en display flex y decir justify-content, y diremos centro y alinear- ítems también, centro. Entonces diré, fila de dirección flex puede cambiar eso a una columna. Entonces en mi cuerpo puedo decir, font-family. Yo quisiera ser Open Sans creo. Abrir Sans genial. Entonces mi h1, vamos a darle un color de blanco. Podemos decir text-shadow 0, 0, 10 px, rgba 0, 0, 0.5. A lo mejor podemos cambiar esto a 4px y esto a 20px y podemos hacer esto aún más oscuro 0.8, sí eso es genial. Puedo decir font-size de 50 px, tal vez 40 px, y entonces nuestro h2 puede ser más o menos lo mismo. Excepto que será 20px. Puede cambiar el margen a 0. El margen a 0 también. Entonces nuestra forma, mismo margin-top de 20 px. Entonces nuestra entrada y decir tipo = texto, y nuestro tipo de entrada =enviar, y aquí podemos hacer lo mismo que nuestro form-contenedor. También podemos simplemente establecer el tipo de pantalla para que se flexione dentro de nuestro formulario. Centro centro pero podemos ir a remar aquí. Sí, así, di frontera, ninguno, y di esquema, ninguno. Diga tamaño de caja, border-box puede decir que el relleno es de 10px, y eso se ve bastante bien. Tal vez 10px, 20px o tal vez podamos decir 10px, 12px como así. O tal vez podamos incluso darle a esto una altura de, digamos 40px. Nuestro envío puede tener una altura de 40px. También podemos decir bg o podemos decir borde de ninguno, contorno, ninguno, puntero cursor. Mi color de fondo, desplácese hacia abajo para conseguir unos colores bonitos aquí, quiero el Rosa. Pongamos eso y luego le demos a esto un relleno de lo que decimos aquí 10, 12. A lo mejor nos puedes dar un poco más. Fantástico y luego el tamaño de fuente puede ser de 16px. Lo mismo aquí, y nuestro color puede ser negro y el peso de la fuente puede ser audaz. Nuestro color aquí también puede ser negro. Eso se ve bastante bien. Lo que me gustaría hacer es, me gustaría ver si puedo agregar una sombra de gota en las hojas sin hacerlo súper lento. Vamos a filtrar y a la sombra. Esto podría tener que estar dentro de citas, pero vamos a revisar dos veces y diremos 0, 0, 0, 0.5. ¿ Eso hizo algo en absoluto? No lo pienses. ¿ Eso hace algo en absoluto? Yo tampoco lo creo. Filtro y sombra de sombra, sombra de sombra así. No, no lo creo. ¿ Qué pasa con CSS filter drop-shadow, drop-shadow oh no hay comentarios. ¿ Qué tal eso? ¿Trabajando en absoluto? Este, está funcionando pero es super es baja. Saquemos eso rápido antes de que se rompa mi computadora. Estamos de vuelta por ahí. Supongo que con el desenfoque y la sombra, las cosas no son tan performantes. Después tenemos nuestro Boletín de Plantas Parallax, inscríbete. A medida que mueves tu ratón todas estas plantas se mueven. Hay algunas raras plages en nuestros personajes aquí y allá. Pero es bastante guay. Todo esto es realmente fácil de cambiar y configurar. Podemos cambiar esto a algo así como 300 para que sea aún más receptivo. Se ve bastante divertido. Ese es mi Boletín de Plantas Parallax. Diviértete creando el tuyo. Si desea cambiar la vista. Se puede ir a, creo Página Completa. Todavía tiene este pequeño bar, quizá puedas ir a Live View. Ahora mis imágenes son masivas, por eso tarda tanto en cargarse. Pero esto es bastante guay. Hay bastante espacio en la cima de la tormenta. A lo mejor puedes cambiar esto. Vamos a la Vista del Editor, y vamos a desplazarnos hacia abajo hasta que lleguemos a nuestro ItemsArray. Creo que se trata de aquí. Vamos por 40 por ciento, sí intentemos eso 40 por ciento. Vamos a refrescar esto. A lo mejor se verá mucho mejor si no tuviera un montón de mis plages, como estas grandes cosas de aquí. De todos modos me gusta. Es muy divertido. Todo es Paralaxing realmente muy bien. Es una manera realmente bonita de tener una página de registro de newsletter. Enfriar. 15. ¿Qué sigue?: Eso es todo para esta clase. Gracias por tomarlo. Espero que te hayas divertido. Espero que hayas aprendido mucho. Espero que quieran hacer algo más de codificación. De lo que quiero dejarte es que esto es sólo el principio. El diseño de interacción es súper divertido y en el mundo web, sin duda es el lado más divertido de JavaScript. Hay mucho más por aprender y ciertamente hay muchas formas mucho mejores, más rápidas y más elegantes de escribir código que como he codificado en esta clase. Mi objetivo ha sido que todo sea lo más sencillo y fácil de entender posible. Si tienes alguna pregunta o quieres discutir algo, por favor hazlo en el área de la comunidad o comunícate conmigo en redes sociales. Si has disfrutado de la clase, por favor dale una reseña y compártala para que otros alumnos la encuentren y se beneficien también de ella. También tengo muchas más clases en la pipe-line. Si te gusta la forma en que enseño, sígueme en Skillshare y en redes sociales y echa un vistazo a taptaptapkaboom dot com. Adiós por ahora y nos vemos pronto.