En este tutorial vamos a implementar una funcionalidad que nos va a permitir que las imágenes de nuestro site puedan pasar de un estado en RGB a escala de grises de una forma sencilla y clara con usando un poco de JS y diferentes librerías. En nuestro código no estará directamente la etiqueta de <canvas> pero sí nos la generará la librería y por eso es importante que tengamos definido el DOCTYPE como HTML5.
Para conseguir este efecto tendremos que usar, además de jQuery, una librería que ha desarrollado Andrew Pryde para hacernos la vida más fácil. Así que iremos al repositorio de Github y nos descargaremos la librería.
Lo primero que vamos a hacer es crear nuestro documento HTML5.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery GreyScale Plugin</title>
</head>
<body>
<section>
<a href="http://www.imaginagroup.com/">
<img src="http://www.imaginagroup.com/wp-content/themes/starkers/images/imaginagroup-logo.png" alt="Image" class="greyScale" />
</a>
</section>
</body>
</html>Una vez tenemos definida la imagen o imágenes a las cuales les vamos a añadir el efecto, es hora de que le demos algunos estilos básicos únicamente para que visualmente se muestre de forma correcta:
<style>
body{
background-color:black;
}
section{
background: url('http://www.imaginagroup.com/wp-content/themes/starkers/images/bg-header-footer.png') repeat scroll 0 0 black;
height:100%;
width:100%;
}
a {
display: block;
text-align: center;
}
</style>Es la hora de darle la funcionalidad y para eso tendremos que llamar primero a jQuery y después a la librería que nos facilitará nuestro buscado efecto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery GreyScale Plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/greyScale.js"></script>
</head>
<body>
<section>
<a href="http://www.imaginagroup.com/">
<img src="http://www.imaginagroup.com/wp-content/themes/starkers/images/imaginagroup-logo.png" alt="Image" class="greyScale" />
</a>
</section>
</body>
</html>Después de tener los JS bien llamados y en su carpeta correspondiente, vamos a colocar la función de jQuery donde podremos definir varios parámetros a la hora de generar el efecto.
<script>
$(function() {
// fade en las imagenes a escala de grises para que no haga un salto brusco
$('.greyScale').hide().fadeIn(1000); });
// window.load para asegurarnos de que las imagenes estan cargadas
$(window).load(function () {
$('.greyScale').greyScale({
// llamada al plugin por el fadeTime que no viene por defecto (default: 400ms)
fadeTime: 500,
reverse: false
});
});
</script>Recuerda siempre llamar a los archivos de JavaScript por el orden correcto. Primero jQuery, después la librería de escala de grises y por último nuestra función. Si nos fijamos en los métodos, lo haremos siempre con un desvanecimiento para que la imagen no nos haga un salto y de esta forma quede más suave.
También usaremos función de que cuando estén todos los elementos de la página cargados haga el efecto de escala de grises. Asimismo podemos modificar el tiempo que tendrá de efecto la animación que por defecto ese de 400 milisegundos.
Ya para terminar este tutorial de greyscale nos faltará que no añadamos la clase .greyScale a todas aquellas imágenes donde queramos que nos haga el efecto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery GreyScale Plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/greyScale.js"></script>
<style>
body{background-color:black;}
section{
background: url('http://www.imaginagroup.com/wp-content/themes/starkers/images/bg-header-footer.png') repeat scroll 0 0 black;
height:100%;
width:100%;
}
a {
display: block;
text-align: center;
}
</style>
</head>
<body>
<section>
<a href="http://www.imaginagroup.com/">
<img src="http://www.imaginagroup.com/wp-content/themes/starkers/images/imaginagroup-logo.png" alt="Image" class="greyScale" />
</a>
<script>
$(function() {
// fade en las imagenes a escala de grises para que no haga un salto brusco
$('.greyScale').hide().fadeIn(1000);
});
// window.load para asegurarnos de que las imagenes estan cargadas
$(window).load(function () {
$('.greyScale').greyScale({
// llamada al plugin por el fadeTime que no viene por defecto (default: 400ms)
fadeTime: 500,
reverse: false
});
});
</script>
</section>
</body>
</html>