Rellax.js - Características de Parallax gratis usando JavaScript de vainilla
Desplazamiento de paralaje Parece increíble cuando se hace bien. No es una función que deseará en todos los sitios web, sino para sitios creativos y páginas de destino, elementos de paralaje llamar la atención rápido.
Hay toneladas de bibliotecas de JavaScript gratuitas para efectos de desplazamiento animados pero muchos están hinchados o demasiado complejos para algunas personas.
Por eso recomiendo Rellax.js para sus necesidades de paralaje. Es un complemento gratuito de código abierto construido en JavaScript de vainilla, por lo que no tiene dependencias.
Por defecto, requiere solo una función simple llamada para asignar la clase de paralaje a los elementos de la página. Luego, a medida que se desplaza, estos elementos permanecer fijo y moverse junto con el punto de vista del usuario.
Puede personalizar estos elementos para que aparezcan más cerca, más lejos o detrás de los elementos de la página. Esto crea el ilusion de profundidad en la página y todo funciona a través de una simple biblioteca de JavaScript.
Todo el código fuente de Rellax está disponible de forma gratuita en GitHub si desea descargar una copia.
Toda la configuración utiliza una sola función JS apuntando al .rellax clase así
var rellax = nuevo Rellax ('. rellax'); Tenga en cuenta que puede utilizar bastante cualquier clase que quieras, pero la demostración del ejemplo usa .rellax por simplicidad.
Desde aqui tu solo envuelve tus elementos de paralaje dentro de un div con el .rellax clase y establecer el atributo de velocidad. Esto funciona a través de la velocidad de rellax de datos atributo personalizado que acepta valores de -10 a +10.
Aquí hay un fragmento de ejemplo desde el HTML en la página de demostración:
Soy extra lento y suave
Tú también puedes elementos centrales en la página y personalizar las posiciones de los elementos a través de CSS.
Rellax no le dice cómo estructurar la página o cómo definir elementos CSS en su página. Todo lo que hace es crear un efecto de desplazamiento de paralaje natural Con JavaScript puro. Cómo usas esto depende totalmente de ti.
Para ver un demo en vivo, Eche un vistazo al sitio principal o navegue por el repositorio de GitHub. Esto incluye algunos documentos, junto con enlaces a sitios web en vivo usando Rellax.js.
Y lo mejor de todo es que el equipo está siempre dispuesto a recibir solicitudes, por lo que si observa algún problema o tiene sugerencias para funciones, simplemente envíe un mensaje rápido al equipo..
