JMiur [E]

... direction-aware hover effect using CSS3 and jQuery ... difícil de traducir; pero digamos que dada una serie de rectángulos con imagenes, al poner el puntero del ratón encima de cada uno de ellos, se mostrará un texto superpuesto que aparecerá mediante una transición cuya dirección varia según donde estemos ... y como mi intento de explicarlo es más confuso que el original en inglés, mejor, veamos el ejemplo y listo:



Bien, de eso se trata así que veamos como se hace.

Requiere tres cosas, el CSS (funcionará sólo en navegadores que interpreten la propiedad transition), un script que funciona con jQuery y el HTML que no es otra cosa que una lista.

Empezamos con el HTML, como dije, una lista (etiqueta UL) donde cada item (etiqueta LI) contiene un enlace con una imagen que es la que veremos por defecto y un DIV con un texto que es el que se verá al poner el puntero del cursor encima:
<ul id="da-thumbs" class="da-thumbs">
  <li>
    <a href="url_enlace" target="_blank">
      <img src="url_imagen" />
      <div>
        <span>el texto a mostrar</span>
      </div>
    </a>
  </li>
  <!-- ... y seguimos agregando imágenes y textos con la misma estructura -->
</ul>
Debajo de eso, colocamos el llamado a la función:
<script type="text/javascript">
  $(function() {$('#da-thumbs > li').hoverdir();});
</script>
Y ahora, la función que podemos colocarla antes del </head> y que podemos descargar desde la página del desarrollador junto con los ejemplos.

(function( $, undefined ) {
  $.HoverDir = function( options, element ) {
    this.$el = $( element );
    this._init( options );
  };
  $.HoverDir.defaults = {hoverDelay : 0,reverse : false};
  $.HoverDir.prototype = {
    _init : function( options ) {
      this.options = $.extend( true, {}, $.HoverDir.defaults, options );
      this._loadEvents();
    },
    _loadEvents : function() {
      var _self = this;
      this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
        var $el = $(this),
          evType = event.type,
          $hoverElem = $el.find( 'div' ),
          direction = _self._getDir( $el, { x : event.pageX, y : event.pageY }),
          hoverClasses= _self._getClasses( direction );
        $hoverElem.removeClass();
        if( evType === 'mouseenter' ) {
          $hoverElem.hide().addClass( hoverClasses.from );
          clearTimeout( _self.tmhover );
          _self.tmhover = setTimeout( function() {
            $hoverElem.show( 0, function() {$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );});
          }, _self.options.hoverDelay );
        } else {
          $hoverElem.addClass( 'da-animate' );
          clearTimeout( _self.tmhover );
          $hoverElem.addClass( hoverClasses.from );
        }
      });
    },
    _getDir : function( $el, coordinates ) {
      var w = $el.width(),
        h = $el.height(),
        x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
        y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
        direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
      return direction;
    },
    _getClasses      : function( direction ) {
      var fromClass, toClass;
      switch( direction ) {
        case 0:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromTop' : fromClass = 'da-slideFromBottom';
          toClass = 'da-slideTop';
          break;
        case 1:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromRight' : fromClass = 'da-slideFromLeft';
          toClass = 'da-slideLeft';
          break;
        case 2:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromBottom' : fromClass = 'da-slideFromTop';
          toClass = 'da-slideTop';
          break;
        case 3:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromLeft' : fromClass = 'da-slideFromRight';
          toClass = 'da-slideLeft';
          break;
      };
      return { from : fromClass, to: toClass };
    }
  };
  var logError = function( message ) {if ( this.console ) {console.error( message );}};
  $.fn.hoverdir = function( options ) {
    if ( typeof options === 'string' ) {
      var args = Array.prototype.slice.call( arguments, 1 );
      this.each(function() {
        var instance = $.data( this, 'hoverdir' );
        if ( !instance ) {
          logError( "cannot call methods on hoverdir prior to initialization; " + "attempted to call method '" + options + "'" );
          return;
        }
        if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
          logError( "no such method '" + options + "' for hoverdir instance" );
          return;
        }
        instance[ options ].apply( instance, args );
      });
    }  else {
      this.each(function() {
        var instance = $.data( this, 'hoverdir' );
        if ( !instance ) {
          $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
        }
      });
    }
    return this;
  };
})( jQuery );

Y por último, la clave, como siempre, es el CSS que agregamos donde más nos guste:
<style>
  .da-thumbs {margin: 0 !important}
  .da-thumbs li { /* cada item */
    background: #FFF; /* color de fondo para el borde */
    float: left;
    margin: 5px; /* separación entre items */
    padding: 8px; /* padding como borde */
    position: relative;
  }
  .da-thumbs li a, .da-thumbs li a img {
    display: block;
    height: 137px; /* el alto de la imagen */
    position: relative;
    width: 185px; /* el ancho de la imagen */
  }
  .da-thumbs li a {overflow: hidden;}
  .da-thumbs li a div { /* el contenedor de los textos */
     background: rgba(75,75,75,0.7); /* un poco de opacidad */
     height: 100%;
     position: absolute;
     width: 100%;
  }
  .da-thumbs li a div span { /* el texto en si mismo */
    color: #FFF;
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin: 15px 10px;
    padding: 10px 0;
    text-align: center;
  }
  .da-thumbs li a div.da-animate { /* la animación del hover */
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  /* la posición inicial de los textos ocultos */
  .da-slideFromTop {left: 0; top: -100%;}
  .da-slideFromBottom {left: 0; top: 100%;}
  .da-slideFromLeft {top: 0; left: -100%;}
  .da-slideFromRight {top: 0; left: 100%;}
    /* la posición final */
  .da-slideTop {top: 0;}
  .da-slideLeft {left: 0;}
</style>
REFERENCIAS:codrops

20 comentarios:

Hogar CRECER  

Qué bonito!!! Lo intentaremos.
Como siempre, GRACIAS!

Responder
Leo Utiha | Konami  

Gran tutorial!
Pero tengo una pregunta relacionada con ese medio.
¿Sabes cómo hacer una especie de "secuencia de texto" en los puestos de Blogger?
Por ejemplo, como este sitio: http://olhardigital.uol.com.br/produtos/digital_news/noticias/acompanhe-o-minuto-a-minuto-da-microsoft

El sitio estaba transmitiendo una "secuencia de texto" Como noticias de Microsoft salió cuando la persona entra en la página no nescessário haga clic en el botón para actualizar la página para ver que el contenido se ha actualizado.

Me estoy rompiendo comienza dos días antes y lo único que encontró fue este código.

http://stackoverflow.com/questions/7414793/how-to-only-auto-refresh-a-div-if-the-content-has-changed



Incluso funciona, pero cuando la página se actualiza automáticamente el contenido de las repeticiones de la página actual, como un iframe dentro de una página exbindo la misma página.

¿Sabía adaptarse de modo que sólo se actualizan automáticamente el cargo como puedo actualizar el post?

JMiur  

No entiendo lo que quieres hacer. En términos generales, para ejecutar algo cada cierto tiempo, debes usar setInterval() que permite ejecutar algo de manera repetitiva.

El resto, es imposible decirte ya que dependerá del ejemplo concreto.

Responder
Gem@  

Me recuerda al tetris :) me gusta para una galería.

Responder
Isaac González Duran  

Hola JMiur, lo he intentado para una galería pero, no me sale, no se porque es, podrías especificarme de alguna manera donde poner cada cosa a ver si me sale?

Responder
Emilio G.  

Hola JMiur, en mi web de juegos (http://birfa.net16.net) la barra lateral no sale. Este problema viene desde que se actualizó el Google Chrome hace unos días. ¿Por qué ya no va? (El código de la web está totalmente visible aquí: view-source:http://birfa.net16.net/

Gracias.

JMiur  

Eso pasa porque la estructura de tu sitio es errónea. Tiene muchos errores de sintaxis; etiquetas mal cerradas, etiquetas mal anidadas, falta un doctype, etc.

En particular, hay una etiqueta al inicio:
<font face="Georgia">
que no está cerrada y todo el sitio está dentro de ella; tienes una hoja de estilo, usa esa hoja para definir la fuente genérica del sitio.

Puedes verificar los errores si usas alguna herramienta de validación online como esta y si tienes instalado Firefox, puedes hacer algo similar, abriendo tu sitio y mirando el código fuente; allí, se verá en rojo cada error detectado y poniéndose encima de esos textos, verás un tooltip indicando el tipo de error.

Responder
Admin  

Hola, muy buena la galería. Eso sí tengo un problema, intenté colocar ese código que dices de la página del desarrollador puesto en el spoiler antes de "/head" como indicas y luego al dar vista previa a esta función de jquery me aparece todo el código en la parte superior del blog. Esto también lo probé creando un sitio nuevo de pruebas en blogger para ver si el error era de mi sitio por otra aplicación con jquery y tuve el mismo problema. Espero que me puedas decir qué puedo hacer para tener esta galería que me interesó bastante la verdad. Saludos y buen blog lo leo a veces y siempre encuentro cosas útiles.

JMiur  

Tendría que ver tu ejempl ocolocado para intentar saaber cuál es el error.

Si lo que ves es el código, significa que hay etiquetas mal armadas.

Admin  

Hola, gracias por responder tan rápido. Mira el blog que creé es uno de los que ofrece blogger por defecto, este es para que veas que el código html aparece en la parte superior del sitio http://pruebascssblogger.blogspot.com/

Espero tu respuesta a ver cómo lo puedo solucionar. Gracias :)

JMiur  

Porque en una página web, todo va dentro de etiquetas; en el caso de los scripts, en Blogger sería algo así:

<script type='text/javascript'>
//<![CDATA[
... el código
//]]>
</script>

Admin Catálogo Juegos PC  

Oh gracias, ahora no aparece en la parte superior el código. Sin embargo, ahora que creo hice todo bien no aparece el efecto, pero el estilo de la galería está bien. El código del estilo y el del jquery los agregué ambos arriba de "/head" y encerré el script de jquery como indicaste. Ahora no entiendo a qué se puede deber el problema. Aquí te dejo la galería http://pruebascssblogger.blogspot.com/2013/01/galeria.html

De nuevo gracias por tu paciencia, espero no estar molestando tanto.

JMiur  

Tal como dice la entrada, este script requiere tener la librería jQuery agregada y en el blog de ejemplo no veo que esté.

Admin Catálogo Juegos PC  

JMiur ya logré instalar jquery, hace poco mandé un comentario pidiendo ayuda sobre esto, bórralo no más. Lo que hice fue seguir las indicaciones de este vídeo http://www.youtube.com/watch?v=nMTsfL40udY ¿ese es un buen método de instalación de jquery?

Por último y para terminar bien, como puedes ver en el blog de pruebas que hice ahora sí funciona el efecto que describes en el post, pero tengo un problema con el marco de las imágenes y unos puntos que aparecen a los lados, ¿cómo puedo solucionar esto?

Gracias! :D

JMiur  

Para agregar jQuery, lo mejor es usar los repositorios de Google:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
sino, cualquier otro:
<script src='http://code.jquery.com/jquery-latest.js' type='application/javascript'></script>

El resto, se debe a las reglas de estilo que tiene tu blog y que afectan a las distintas etiquetas:; márgenes, paddings, bordes, etc
.widget .post-body ul {.......}
.widget .post-body li {.......}
.post-body img, .post-body .tr-caption-container {.......}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {.......}

Deben eliminarse o sobrescribirse usando !imporant; por ejemplo:

.da-thumbs li {
float: left;
list-style-type: none;
margin: 5px !important;
padding: 8px !important;
position: relative;
}

.widget ul {
line-height: 1.2 !important;
padding: 0 0 0 1.25em !important;
}

.da-thumbs li a, .da-thumbs li a img {
border: none !important;
box-shadow: none !important;
display: block;
height: 137px;
padding: 0 !important;
position: relative;
width: 185px;
}

Todos esos detalles ya son cuestiones de diseño particular de cada sitio.

Admin Catálogo Juegos PC  
Este comentario ha sido eliminado por el autor.
Admin Catálogo Juegos PC  

Solucioné el problema de los puntos! Gracias por tu ayuda, ya estoy listo para colocar esa galería en mi sitio, de nuevo, gracias por tu ayuda y paciencia. Saludos.

Responder
[Silver]  

muy bueno, este efecto..lastima que no sé porque no me funciona.. :/

igual estaba buscando un efecto para hacer un book de fotos, en la cual se vean las miniaturas para ver las fotos, y cuando esté en hover haga algún efecto y cuadno toques te aparezcan las fotos del book para visualizar..

alguno plug in para recomendar?

Responder
Rincones Web  

Buenas, he intentado utilizar este efecto en mi sitio web pero no me ha resultado. El CSS ha funcionado, he instalado jquery (el más actual) pero no me ha resultado el efecto transition. Espero me puedas ayudar JMiur, Lo intenté en http://www.bajalodemega.com/p/intento-2.html ojalá le puedas dar una mirada y ver en qué estoy fallando, intenté varias cosas en la plantilla, pero sin éxito. Saludos!

JMiur  

La página que indicas, no existe.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR