2

Gostaria de saber como faço esse efeito que tem nesse site ou nesse outro.

Quando eu passo o mouse em cima da imagem ela se mexe.

Um detalhe importante é que não importe onde eu passe o mouse, a imagem sempre tem que mexer no segundo link isso fica bem nítido.

jQuery(document).ready(function($) {
  $('#Parallax').mousemove(
    function(e) {
      /* Work out mouse position */
      var offset = $(this).offset();
      var xPos = e.pageX - offset.left;
      var yPos = e.pageY - offset.top;

      /* Get percentage positions */
      var mouseXPercent = Math.round(xPos / $(this).width() * 100);
      var mouseYPercent = Math.round(yPos / $(this).height() * 100);

      /* Position Each Layer */
      $(this).children('img').each(
        function() {
          var diffX = $('#Parallax').width() - $(this).width();
          var diffY = $('#Parallax').height() - $(this).height();

          var myX = diffX * (mouseXPercent / 100); //) / 100) / 2;


          var myY = diffY * (mouseYPercent / 100);


          var cssObj = {
              'left': myX + 'px',
              'top': myY + 'px'
            }
            //$(this).css(cssObj);
          $(this).animate({
            left: myX,
            top: myY
          }, {
            duration: 50,
            queue: false,
            easing: 'linear'
          });

        }
      );

    }
  );
});
body {
  background-color: #3D7991;
  font-family: Verdana, sans-serif;
  font-size: small;
  line-height: normal;
}
.Clear {
  clear: both;
  height: 0;
  overflow: hidden;
}
h1 {
  margin-bottom: 0.5em;
}
p {
  margin-bottom: 0.5em;
  line-height: 1.6em;
}
a {
  color: #3D7991;
}
.Return {
  font-size: 1.2em;
  margin-top: 2em;
  text-align: center;
}
#Dev {
  position: absolute;
}
#OuterBox {
  background-color: #FAFAF2;
  margin: 25px auto auto auto;
  padding: 25px;
  position: relative;
  width: 750px;
  -moz-box-shadow: 5px 5px 15px #2A5364;
  box-shadow: 5px 5px 15px #2A5364;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#Parallax {
  background-color: #880088;
  height: 500px;
  margin: auto;
  margin-top: 2em;
  overflow: hidden;
  position: relative;
  width: 750px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#Parallax img {
  position: absolute;
  top: 0;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="Parallax">
  <img src="http://publicdomainvectors.org/photos/cloud_jon_phillips_01.png" />
  <img src="http://4.bp.blogspot.com/-pOjvZCG09C4/Uyo8SszT0iI/AAAAAAAAPBY/7HtQrWmHyYg/s1600/molde-nuvem-desenho.png" />
  <img src="http://2.bp.blogspot.com/-g11nccDlhlY/U_u4DBMTv9I/AAAAAAAARX8/tjurGjgli4I/s1600/Cute%2B-%2Bnuvem%2B-%2BCria%C3%A7%C3%A3o%2BBlog%2BPNG-Free.png" />
</div>

5
  • 1
  • jsfiddle.net/uMk7m/2 e isso aqui so que e mais trabalhado o meu 4/05/2015 às 18:11
  • eu tenho 5 imagens e quero movelas nesse exemplo so tem 2 e queria que o efeito ficasse parecido com a do link porem voce nao consegue entrar mais tenta digitar no google destiny site oficial 4/05/2015 às 18:18
  • 1
    Veja alguns desses resultados utilizando Bootstrap 3: bootply.com/tagged/parallax. Mas pelo que você disse, você quer um efeito ao passar o mouse nas imagens e não um parallax, correto? 4/05/2015 às 18:34
  • acho que sim chegou a ver o outro link ai que acabei de mandar e tambem editei a pergunta e adicionei mais um link tbm 4/05/2015 às 18:36

2 Respostas 2

1

Em geral esse efeito é feito com o parallax do jQuery.

Aqui um artigo completo sobre Parallax simples com JQuery e CSS

Aqui uns sites com exemplos:

50+ Best JQuery Parallax

Parallax.js

Creio que com essas fontes tu deves conseguir fazer o que deseja!

Abraços! (: Observação: uma print do site que tu mesmo mandou.

inserir a descrição da imagem aqui

Aqui um site com um exemplo do JS BEM SIMPLES para a implementação.

1
-2

Desloque a imagem com baixo fator, inércia e atrito com deslocamento contrário ao mouse. O mouse será tratado como um vetor aceleração e a imagem terá grande massa.

2
  • 1
    amigo poderia ser mais especifico chegou a dar um olhadinha nos links 4/05/2015 às 18:46
  • A tá vocês estão acostumados as fórmulas e os códigos fontes (tudo pronto). Nada contra, mas estou sem tempo agora.
    – Fabio
    4/05/2015 às 18:49

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 .