es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Rellax.js - Funciones gratuitas de Parallax usando JavaScript Vanilla

El desplazamiento en paralaje parece increíble cuando se hace bien. No es una función que desee en cada sitio web, pero para sitios creativos y páginas de destino, los elementos de paralaje atraen la atención rápidamente .

Hay toneladas de bibliotecas gratuitas de JavaScript para efectos de desplazamiento animados, pero muchas están hinchadas o son demasiado complejas para algunas personas.

Es por eso que recomiendo Rellax.js para sus necesidades de paralaje. Se trata de un complemento de código abierto gratuito creado con JavaScript estándar, por lo que no tiene dependencias .

Por defecto, solo requiere una llamada de función simple para asignar la clase de paralaje a elementos de página. Luego, a medida que se desplaza, estos elementos permanecen fijos y se mueven junto con el punto de vista del usuario.

Puede personalizar estos elementos para que aparezcan más cerca, más alejados o detrás de los elementos de la página. Esto crea la ilusión de profundidad en la página y todo funciona a través de una biblioteca de JavaScript simple.

Todo el código fuente de Rellax está disponible de forma gratuita en GitHub si desea descargar una copia.

Toda la configuración usa una sola función JS que se dirige a la clase .rellax de la siguiente manera:

 var rellax = new Rellax ('. rellax'); 

Tenga en cuenta que puede usar casi cualquier clase que desee, pero la demostración de ejemplo usa .rellax por simplicidad.

Desde aquí, simplemente envuelve tus elementos de paralaje dentro de un div con la clase .rellax y establece el atributo de velocidad . Esto funciona a través del atributo personalizado de data-rellax-speed que acepta valores de -10 a +10.

Aquí hay un fragmento de ejemplo del HTML en la página de demostración:

Soy más lento y suave

También puede centrar elementos en la página y personalizar las posiciones de los elementos a través de CSS.

Rellax no te dice cómo estructurar la página o cómo definir elementos CSS en tu 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 una demostración en vivo, eche un vistazo al sitio principal o explore el repositorio de GitHub. Esto incluye cierta documentación, junto con enlaces a sitios web en vivo usando Rellax.js.

Y lo mejor de todo es que el equipo está constantemente dispuesto a aceptar solicitudes de extracción, por lo que si nota algún problema o tiene sugerencias de funciones, envíe un mensaje rápido al equipo.

18 extensiones gratuitas de Photoshop para todas las creatividades

18 extensiones gratuitas de Photoshop para todas las creatividades

Adobe Photoshop es un programa de edición de gráficos muy popular que viene con un montón de características, demasiadas para nombrar. Es difícil imaginar que alguien pueda necesitar más funciones. Sin embargo, Photoshop admite extensiones, lo que le permite agregar aún más funciones útiles al programa. Algunas

(Consejos de tecnología y diseño)

10 navegadores sin conexión para Windows: lo mejor de

10 navegadores sin conexión para Windows: lo mejor de

Un navegador sin conexión lo ayuda a navegar por la Web sin conexión, reduciendo sus gastos de Internet. Piénselo como una herramienta para "guardar ahora, leer más tarde", pero que involucra sitios web completos y todas sus capas y enlaces internos. Los contenidos se descargarán y sus recursos se almacenarán en caché, para que pueda navegar por el sitio web y sus páginas más tarde, incluso sin conexión a Internet.Esto es ú

(Consejos de tecnología y diseño)