7

Como crio o efeito semelhante a este site: http://www.amgrconstrucoes.com.br/lancamento

Ao passar o mouse em cima da div que contem a imagem do empreendimento surge uma outra div sobre ela pelo mesmo lado que foi passado o mouse.

Ou seja, se passar o mouse pela direita a div vai entrar pela direita, se passar pela esquerda ela vai entrar pela esquerda.

inserir a descrição da imagem aqui

1

2 Respostas 2

3

Esse efeito é produzido pelo plugin DirectionAwareHoverEffect.

Como usar:

$('#da-thumbs > li').hoverdir();
// ou com opções
$('#da-thumbs > li').hoverdir({hoverDelay: 75, hoverElem: '.elem'});

Opções padrões:

defaults: {
    speed: 300, // Tempo em milissegundos
    easing: 'ease',
    hoverDelay: 0, // Tempo em milissegundos
    inverse: false,
    hoverElem: 'div'
}

Caso você queira fazer por conta própria, pode acessar o código fonte no GitHub.

0
2

Uma forma sem uso de plugins, que nada mais é do que código a ser carregado.

Observe que com muito pouco código é possível obter o efeito esperado.

function closestEdge(x,y,w,h){
   var topEdgeDist = distMetric(x,y,w/2,0);
   var bottomEdgeDist = distMetric(x,y,w/2,h);
   var leftEdgeDist = distMetric(x,y,0,h/2);
   var rightEdgeDist = distMetric(x,y,w,h/2);
   
   var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
   switch (min){
      case leftEdgeDist:
         return 4;
      case rightEdgeDist:
         return 2;
      case topEdgeDist:
         return 1;
      case bottomEdgeDist:
      return 3;
   }
}

function distMetric(x,y,x2,y2){
   var xDiff = x - x2;
   var yDiff = y - y2;
   return (xDiff * xDiff) + (yDiff * yDiff);
}

$(".box").hover(
   function(event){
     var el_pos = $(this).offset();
     var edge = closestEdge(event.pageX - el_pos.left, event.pageY - el_pos.top, $(this).width(), $(this).height());

      if(edge == 1) var iTop = "-100%", iLeft = "0";
      if(edge == 2) var iTop = "0", iLeft = "100%";
      if(edge == 3) var iTop = "100%", iLeft = "0";
      if(edge == 4) var iTop = "0", iLeft = "-100%";

      $("a", this)
      .css({
         "transition":"none",
         "left": iLeft,
         "top": iTop
      });
      
      $this = $(this);
      setTimeout(function(){
         $("a", $this)
         .css({
            "transition":"",
            "left": "0",
            "top": "0"
         });
      }, 10);
   }, function(event){
      
     var el_pos = $(this).offset();
     var edge = closestEdge(event.pageX - el_pos.left, event.pageY - el_pos.top, $(this).width(), $(this).height());

      if(edge == 1) var fTop = "-100%", fLeft = "0";
      if(edge == 2) var fTop = "0", fLeft = "100%";
      if(edge == 3) var fTop = "100%", fLeft = "0";
      if(edge == 4) var fTop = "0", fLeft = "-100%";

      $("a", this)
      .css({
         "left": fLeft,
         "top": fTop
      });
   }
);
.box{
   margin: 15px;
   width: 200px;
   height: 200px;
   display: inline-block;
   position: relative;
   overflow: hidden;
}

.box img{
   width: 200px;
   height: 200px;
}

.box a{
   background-color: rgba(255, 255, 255, .8);
   position: absolute;
   width: 200px;
   height: 100%;
   transition: all 300ms ease;
}

.box a h4{
   color: #fff;
   background: #000;
   padding: 10px 15px;
   top: 50%;
   left: 50%;
   display: block;
   margin: 0 auto;
   transform: translate(-50%, -50%);
   position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <a href="#"><h4>Titulo 1</h4></a>
</div>
<div class="box">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <a href="#"><h4>Titulo 2</h4></a>
</div>
<br>
<div class="box">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <a href="#"><h4>Titulo 3</h4></a>
</div>
<div class="box">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <a href="#"><h4>Titulo 4</h4></a>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .