Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Junior Zappatta

Mouse seguindo fotos

Por , em Javascript

Recommended Posts

Junior Zappatta    0

Junior Zappatta
Postado

Olá primeiramente quero dizer que foi bom encontrar um forum com tantas pessoas qualificadas, estive olhando os tópicos e vi as perguntas como são respondidas com grandes resultados. Pois bem, por isso estou trazendo um problema que estou enfrentando e acredito que seja bem mais facil para vocês afinal sou um iniciante em scripts e tudo mais.

 

Tenho um site simples e queria incrementar ele com esse efeito do site abaixo, ver link:

http://www.capsula.com.pt/capsula.php

 

o mouse passa sobre toda extensão da página e as fotos vão seguindo. já vi que as fotos foram tiradas em sequencia o link das imagens está abaixo:

http://www.capsula.com.pt/images/584_800x800.png

 

Se alguem puder me ajudar, ou me ensinar uma outra maneira e puder mandar o código eu fico muito grato.

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá, Junior.

 

Eu fiz parte do que você precisa. Mas eu espero que ajude.

 

Eu utilizei a imagem que você colocou comentou na sua dúvida:

584_800x800.png

 

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Seguindo o mouse</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="followingMouse.css">
</head>
<body>
  <a href="#" class="photo" data-position="bottom">
    Photo.
  </a>

  <script src="followingMouse.js"></script>
</body>
</html>

CSS (reset.css):

* {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #EFEFEF;
  background-color: #D1D5D8;
}

a {
  color: inherit;
  text-decoration: none;
}

input {
  font-size: inherit;
  font-family: inherit;
}

CSS (followingMouse.css):

.photo {
  display: block;
  text-indent: -999px;
  overflow: hidden;
  background-image: url(photo.png);
  background-repeat: no-repeat;
  height: 100px;
  width: 115px;
  margin: 10% auto 0;
}
.photo[data-position="bottom"] {
  background-position: left top;
}
.photo[data-position="top"] {
  background-position: -230px -100px;
}
.photo[data-position="left"] {
  background-position: -115px -200px;
}
.photo[data-position="right"] {
  background-position: 0 -100px;
}

.photo[data-position="bottomRight"] {
  background-position: -115px 0;
}
.photo[data-position="bottomLeft"] {
  background-position: -345px -200px;
}

.photo[data-position="topRight"] {
  background-position: -115px -100px;
}
.photo[data-position="topLeft"] {
  background-position: -345px -100px;
}

.photo:hover {
  background-position: 0 -300px;
}

JavaScript:

(function () {
  'use strict';

  var $photo = document.querySelector('.photo');
  var photoPosition = getPosition($photo);

  document.addEventListener('mousemove', function (event) {
    var mousePositionX = event.clientX;
    var mousePositionY = event.clientY;

    if (mousePositionX > photoPosition.x) {
      $photo.dataset.position = 'right';
    };
    if (mousePositionX < photoPosition.x) { 
      $photo.dataset.position = 'left';
    };
  });


  function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft);
        yPosition += (element.offsetTop - element.scrollTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
  }
})();

Se ficar alguma dúvida só falar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Junior Zappatta    0

Junior Zappatta
Postado

Ola meu amigo, muito obrigado por me ajudar, mais ainda tive duvida em relação a esse código.

 

poderia se não for pedir de mais, salvar um arquivo em .html e me mostrar somente onde trocar a imagem que vou usar?

 

Se puder fico muito grato.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito