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 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 |

Suscribirse a la entradas
 
CERRAR