Img-Effects

Este conjunto de la librería ofrece potentes mixins y funciónes de JavaScript para mejorar la experiencia visual en tu sitio web.

Uso:

Importar mixins de SASS

@import './ani-motion936/Img-Effects/imgEff';

Importar JS

import {} from './ani-motion936/Img-Effects/imgEff.js'

ParralaX

El mixin Parallax te permite crear efectos de fondo en parallax para elementos HTML, como secciones o divs. Asegúrate de tener configuradas las siguientes propiedades:

.my-seccion{
@include parallaX
//...
}

TextImg

Este mixin se utiliza para aplicar un efecto de recorte de fondo de texto a elementos HTML. Esto es útil para resaltar texto con imágenes de fondo. Aplica el mixin de la siguiente manera:

.mi-elemento-de-texto{
@include parallaX; // el efecto parallaX aqui es opcional
@include textImg;
/* Otras propiedades de estilo */
}

Hello world

imgScroll

La función imgScroll se utiliza para aplicar efectos de escala en imágenes en función del desplazamiento vertical de la página. Asegúrate de importar esta función en tu proyecto JavaScript más el mixin y configurarla con las siguientes opciones:

Mixin

.mi-imagen{
@include imgScroll;
/* Otras propiedades de estilo */
}

JS

import { imgScroll } from './ani-motion936/Img-Effects/imgEff.js';

const options = {
element: document.querySelector('.tu-imagen'),
units: 0.02,// Ajusta la velocidad del efecto
minScale: 1,// Escala mínima permitida
maxScale: 2,// Escala máxima permitida
};

imgScroll(options);

zoomImg

El mixin ZoomImg permite crear un efecto de zoom suave en imágenes contenidas dentro de elementos. Debes especificar el ancho y la altura deseados. Aplica el mixin así:

.mi-contenedor-de-imagen {
@include zoomImg(300px, 200px); /* Ancho y altura personalizados */
}