Skip to content

Instantly share code, notes, and snippets.

@uryu-myao
Forked from felquis/parallax.html
Last active May 21, 2018 07:01
Show Gist options
  • Save uryu-myao/043ab901b559b2a78f18e14cbf216ebe to your computer and use it in GitHub Desktop.
Save uryu-myao/043ab901b559b2a78f18e14cbf216ebe to your computer and use it in GitHub Desktop.
Mouse Parallax Effect
<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Mouse Parallax Effect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="parallax">
<img class="parallax-item" src="http://bymarina.com.br/wp-content/uploads/2011/01/sol2.jpg" width="150">
<img class="parallax-item" src="http://mercuriovenus.no.sapo.pt/menu/mercurio/Mercurio.gif" width="150">
<img class="parallax-item" src="http://starchild.gsfc.nasa.gov/Images/StarChild/solar_system_level1/venus.gif" width="150">
<img class="parallax-item" src="http://www.anjodeluz.net/Mashubi%20Rochell/earth.gif" width="150">
</div>​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="parallax.js"></script>
</body>
</html>
/*
*
* Simple Parallax, 01/03/2012
*
* Contributors
* @felquis, @cironunesdev
* DEMO: http://jsfiddle.net/6qhVN/
*/
(function( $, window, document ) {
var $doc = $(document),
body = document.body,
val = 0.2,
limit = 1;
$(function(){
$doc.on('mousemove', function( e ){
var //first proprities to calculate the parallax
xMouse = e.pageX,
yMouse = e.pageY,
xCenter = body.clientWidth / 2,
yCenter = body.clientHeight / 2,
offsetLeft = xMouse - xCenter,
offsetTop = yMouse - yCenter,
i,
//then caching dom elem and your lenght
$elem = $('.parallax-item');
$elem.each(function( i ) {
$(this).css({
left: offsetLeft * val,
top: offsetTop * val
});
console.log(val);
val += 0.2;
if( val === limit ) {
val = 0.2;
}
});
});
});
}( jQuery, window, document ))
#parallax{
position:relative;
width:500px;
height:500px;
margin:5% auto;
overflow:hidden;
border:1px solid;
}
#parallax img{
position:relative;
margin:0 auto;
display:block;
}​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment