Im??genes con efecto desvanecer o aclarar

  • septiembre 24, 2011

Con anterioridad vimos c??mo darle un efecto de opacidad a las im??genes al pasar el cursor, para ello inclu??amos dentro del c??digo de la imagen los estilos necesarios para generar la opacidad. El efecto descavenecer o aparecer que se explica en esta entrada no es muy diferente al ya comentado pero posee una nueva caracter??stica. Al pasar el cursor sobre la imagen, ??sta se desvanece o aclara suavemente.

A continuaci??n puede verse el truco en funcionamiento:



El resultado presenta dos variantes del efecto. La primera tira de im??genes aparece con un grado de opacidad de 0.5 que produce la aparici??n de la imagen al pasar el cursor; la segunda tira, por el contrario, no presenta opacidad sino que se las im??genes se desvanecen al pasar el cursor.

Dise??o>Edici??n de HTML>expandimos artilugios


Localizamos la etiqueta </head> y justo antes insertamos uno de los siguientes bloques, dependiendo de la variante escogida y la presentaci??n deseada:

Para el efecto aparecer al pasar el cursor en todas las im??genes del blog:

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’/>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘img’).fadeTo(‘slow’, 0.5);
$(‘img’).hover(function() {
$(this).fadeTo(‘slow’, 1.0);
}, function() {
$(this).fadeTo(‘slow’, 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en todas las im??genes del blog:

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’/>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘img’).fadeTo(‘slow’, 1.0);
$(‘img’).hover(function() {
$(this).fadeTo(‘slow’, 0.5);
}, function() {
$(this).fadeTo(‘slow’, 1.0);
});
});
</script>

Para el efecto aparecer al pasar el cursor en las im??genes escogidas:

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’/>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘.blImagjtef’).fadeTo(‘slow’, 0.5);
$(‘.blImagjtef’).hover(function() {
$(this).fadeTo(‘slow’, 1.0);
}, function() {
$(this).fadeTo(‘slow’, 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en las im??genes escogidas:

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’/>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘.blImaggjtef’).fadeTo(‘slow’, 1.0);
$(‘.blImaggjtef’).hover(function() {
$(this).fadeTo(‘slow’, 0.5);
}, function() {
$(this).fadeTo(‘slow’, 1.0);
});
});
</script>

Los dos ??ltimos c??digos, al contrario que los dos primeros (que al guardar la plantilla aplicar??n el efecto a todas las im??genes), se aplican de forma manual, utilizando las clases resaltadas en color rojo (respectivamente), dentro del c??digo de la imagen:

<img class=’blImagjtef’ src=’URL DE LA IMAGEN‘/>

<img class=’blImaggjtef’ src=’URL DE LA IMAGEN‘/>

En donde dice URL DE LA IMAGEN incluiremos la direcci??n de la fotograf??a o imagen.

El truco usa jQuery por lo tanto, si hemos instalado ScriptaculousPrototype o Mootools seguramente no pueda utilizarse.

Con esto habremos terminado la instalaci??n de este elegante efecto.

No Comments Found