Merida Design Blog

Publicado el | Recursos / ,

Image Blur Plugin: Efecto blur para imágenes, compatible con todos los navegadores

Plugin de jQuery que te permite aplicar efecto blur a las imágenes dinámicamente a través de filtros de SVG, con este plugin no tendrás que preocuparte por la compatibilidad con los navegadores ya que soporta incluso ie6 (R.I.P.) a diferencia de los filtros de CSS que no es soportado por ninguna versión de internet explorer, solamente Edge (verifícalo aquí).

El plugin también es compatible con Velocity.js, de manera que si detecta esta librería, usará su motor de animaciones, de lo contrario usará el $.animate de jQuery.

Ejemplo de uso

1. Incluye la librería después de jQuery.


    <script src="jquery.min.js"></script>
    <script src="background-blur.min.jd"></script>

2. Crea el elemento que contendrá la imagen con el efecto.


    <div id="blur-image"></div>

3. Crea la imagen dentro del elemento.


    $('#blur-image').backgroundUrl({
        imageUrl: 'http://ruta-de-la-imagen',
        blurAmount: 50,
        imageClass: 'bg-blur' 
    });

3.1. Tanmbién puedes crear una imagen y hacer que aparezca con efecto de desvanecimiento.


    $('#blur-image').backgroundUrl({
        imageUrl: 'http://ruta-de-la-image',
        blurAmount: 50,
        imageClass: 'bg-blur',
        duration: 1000, // La duración para el efecto de desvanecimiento
        endOpacity: 1 // La opacidad que debe tener la imagen al finalizar el efecto
    });

Página: http://msurguy.github.io/background-blur



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: