Image Cross Fade Transition

Scripts, CSS, Diseño Web

fadetransi.jpg

En jqueryfordesigners podremos ver diversas técnicas para lograr fundidos mientras vamos generando transiciones entre una y otra imagen. Es un efecto sencillo pero que puede dar un estilo agradable a nuestros proyectos. Se puede lograr de una forma muy simple con CSS o mediante JavaScript, con una imagen que al posar el ratón sobre ella genere la transición y luego de haber dejado nuestro ratón vuelva lentamente a la imagen original con un desvanecimiento muy suave.

Ver Demo - Descarga Ejemplo - Mas info jqueryfordesigners - Mas demos 1, 2, 3

Tecnica con jQuery
En nuestro encabezado

PLAIN TEXT
JavaScript:
  1. <script src="js/jquery.js" type="text/javascript"></script>
  2.  
  3.     <script type="text/javascript">
  4.     <!--
  5.    
  6.     $(function () {
  7.         // find the div.fade elements and hook the hover event
  8.         $('div.fade').hover(function() {
  9.             // on hovering over find the element we want to fade *up*
  10.             var fade = $('> div', this);
  11.  
  12.             // if the element is currently being animated (to fadeOut)...
  13.             if (fade.is(':animated')) {
  14.                 // ...stop the current animation, and fade it to 1 from current position
  15.                 fade.stop().fadeTo(250, 1);
  16.             } else {
  17.                 fade.fadeIn(250);
  18.             }
  19.         }, function () {
  20.             var fade = $('> div', this);
  21.             if (fade.is(':animated')) {
  22.                 fade.stop().fadeTo(3000, 0);
  23.             } else {
  24.                 fade.fadeOut(3000);
  25.             }
  26.         });
  27.     });
  28.    
  29.     //-->
  30.     </script>

Un poco de CSS

PLAIN TEXT
CSS:
  1. .fade {
  2.   position: absolute;
  3.   top: 100px
  4.   left: 100px
  5. }
  6.  
  7. .fade div {
  8.   position: absolute;
  9.   top: 0;
  10.   left: 0;
  11.   display: none;
  12. }

Nuestra estructura

PLAIN TEXT
HTML:
  1. <h2> Tecnica jQuery</h2>
  2. <div class="fade">
  3.   <a href="http://xyberneticos.com/"><img src="1.jpg" /></a>
  5.     <a href="http://xyberneticos.com/"><img src="2.jpg" /></a>
  6.   </div>
  7. </div>

TECNICA con CSS

PLAIN TEXT
CSS:
  1. img.fade {
  2.   opacity: 1;
  3.   -webkit-transition: opacity 1s linear;
  4. }
  5.  
  6. img.fade:hover {
  7.   opacity: 0;
  8. }

PLAIN TEXT
HTML:
  1. <h2> Tecnica CSS</h2>
  2.       <span style="position: relative;">
  3.     <img src="2.jpg" />
  4.     <img
  5.       style="position: absolute; left: 0px;"
  6.       src="1.jpg" class="fade" />
  7. </span>

Compartelo

  1. User Gravatar

    Mia Tyler said,

    Wrote on April 21, 2008 @ 5:11

    Hi there...Man i love reading your blog, interesting posts ! it was a great Sunday .

  2. User Gravatar

    Esteban Presa said,

    Wrote on April 21, 2008 @ 19:04

    Hola! bueno ya que es la primera vez que posteo aprovecho para felicitarte por el blog, soy un lector diario...

    Con el tema del thread queria decir/preguntar por la tecnica con css...

    El uso del webkit no nos anda en todos los exploradores... y por lo tanto nos quedara como un hover de la imagen, solo lo veremos bien en safari que tiene el webkit...

    Seria lo mismo con que los bordes redondeados que tiene mozila para el css...

    En fin saludos !!

    Gracias por entretenernos todos los días y ayudarnos

  3. User Gravatar

    Gerangel said,

    Wrote on April 22, 2008 @ 15:15

    Hola nikko tiene un bug, porq no anda en ningún otro explorador q no sea Mozilla!

    Un saludo!

  4. User Gravatar

    Gabriel said,

    Wrote on April 29, 2008 @ 18:00

    Alguna idea de algun script que haga exactamente lo mismo pero con mootools ?

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: