0

Preciso do efeito abaixo em css3 ou javascript. Ir para GIF

PRECISO DESTE EFEITO

O que já tenho é somente o básico: A imagem não faz o efeito desejado, pois ela parti do seu próprio centro. Preciso que seja a partir de seu ponto inferior direito, conforme o GIF acima.

// when DOM is ready
$(document).ready(function() {

  //console.log("DOM ready");

  mapItems = $("div.map").find("div img.mapItem");

  var tempItem;

  for (var i = 0; i < mapItems.length; i++) {

    tempItem = mapItems[i];

    $(tempItem).click(function($e) {

      $e.preventDefault();
      var desc = $("#" + $(this).attr('id') + "-desc").attr("data-desc");
      $("#" + $(this).attr('id') + "-desc").html('<p>' + desc + '</p>');

      $("#" + $(this).attr('id') + "-desc").toggleClass("modal-celebration");
      $(this).toggleClass("down");

    });



  };

});
.rotate {
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  transition: all 0.5s linear;
}
.rotate.down {
  -moz-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
@-webkit-keyframes overlayfx {
  0% {
    -webkit-transform: scale(.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.1);
    opacity: 1;
    z-index: 1;
  }
}
@-moz-keyframes overlayfx {
  0% {
    -moz-transform: scale(.8);
    opacity: 0;
  }
  100% {
    -moz-transform: scale(1.1);
    opacity: 1;
    z-index: 1;
  }
}
@keyframes overlayfx {
  0% {
    transform: scale(.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
    z-index: 1;
  }
}
.modal-celebration {
  display: block!important;
  width: 158px;
  height: 158px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  -webkit-transform: scale(.8);
  -webkit-animation: overlayfx 0.3s linear 0.1s 1 forwards;
  -moz-transform: scale(.8);
  -moz-animation: overlayfx 0.3s linear 0.1s 1 forwards;
  transform: scale(.8);
  animation: overlayfx 0.3s linear 0.1s 1 forwards;
}
p {
  position: relative;
  top: 47px;
  left: 9px;
  text-align: center;
  width: 138px;
  font-size: 18px;
}
/*** ITEM ***/

#local {
  left: 311px;
  top: 384px;
}
#local-desc {
  display: none;
  left: 311px;
  top: 20px;
  z-index: -999999;
  text-align: center;
  background-repeat: no-repeat;
  background-image: url(http://rdeveloper.com.br/imagens//lake-club.png);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="main">

  <div id="map" class="map">


    <!-- DESCRIÇÕES -->
    <div class="mapDesc" data-desc="Lake Club de alto nível." id="local-desc" style="display: none;"></div>



    <!-- LOJAS -->
    <div id="z-in">
      <a href="#">
        <img src="http://rdeveloper.com.br/imagens/AMAIS-_0021_NEW-PIN.png" class="mapItem itemDefault rotate" id="local" />
      </a>
    </div>




  </div>

2
  • 1
    Parece ser algo simples, mas a forma como você descreveu o que precisa fazer não está clara, eu pelo menos não entendi muito bem qual é o resultado esperado. 11/02/2016 às 16:26
  • Você ao menos teve o trabalho de comparar a animação do GIF com meu trecho de código? Não percebeu a diferença? "A imagem não faz o efeito desejado, pois ela parti do seu próprio centro. Preciso que seja a partir de seu ponto inferior direito, conforme o GIF acima."
    – Lollipop
    11/02/2016 às 16:44

1 Resposta 1

3

Utilize a propriedade transition para a animação progressiva e bottom para posicionar no canto esquerdo inferior:

$('button').click(function() {
  $('p').css({
    "width": "158px",
    "height": "158px"
  });
});
div {
  position: relative;
  display: block;
  width: 158px;
  height: 158px;
  border: 1px solid black;
}
p {
  display: block;
  position: absolute;
  bottom: 0;
  margin: 0;
  width: 79px;
  height: 79px;
  background-image: url("http://rdeveloper.com.br/imagens/lake-club.png");
  background-size: contain;
  -webkit-transition: width 600ms ease-in-out, height 600ms ease-in-out;
  -moz-transition: width 600ms ease-in-out, height 600ms ease-in-out;
  -o-transition: width 600ms ease-in-out, height 600ms ease-in-out;
  transition: width 600ms ease-in-out, height 600ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p></p>
</div>
<button>Aumentar</button>

1
  • falta uma coisa mano. O retorno da "bola" ao estado inicial.
    – Lollipop
    11/02/2016 às 20:39

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 .