18 + CSS filtros implementados en Pure JavaScript-philter

Vista prévia

Descripción

Philter es un plugin de JavaScript puro que le permite aplicar filtros de 18 + CSS a cualquier imagen usando atributos de datos HTML.

Funcionamiento

Instale la biblioteca de JavaScript de philter en su proyecto.

npm install philter

<script src="/path/to/philter.min.js"></script>

Inicializar el plugin y estamos listos para ir.

new Philter({


// options here
});

Aplique filtros CSS personalizados a su imagen como este.

<div

data-philter-tono-rotar="330"

data-philter-Contraste="125"

data-philter-Saturar="125"

data-philter-Brillo="60"

data-philter-drop-shadow="0 0 5 30">
</div>

Filtros CSS disponibles.

• Desenfoque
• Grises
• tono-rotar
• Saturar
• Sepia
• Contraste
• Invertir
• Opacidad
• Brillo
• drop-shadow: Requires 4 values. The 4th value instead of color is Opacidad 0 to 100%.
• SVG: requiere 1 valor – ID de filtro.
• color: Requires 2 values. Color and Opacidad.
• vintage: Requires an integer from 1 to 6.
• duotono – requiere 2 valores. 2 colores en hex.
• – personalizada requiere una cadena – nombre de filtro personalizado.
• anaglifo – – experimental requiere un valor de offset anaglifo.

Opciones posibles con valores predeterminados.

new Philter({



// hover transition time


transitionTime: 0.5,



 // philter directory


url: './js',



 // 'philter' in data attributes


tag: true



});

Registro de cambios

v1.5.0 (09/14/2018)

• Añadidos más filtros