Skip to content

Instantly share code, notes, and snippets.

@caioerick

caioerick/parallax.html

Created June 2, 2014 02:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save caioerick/552d226cbe576abd0e6f to your computer and use it in GitHub Desktop.
Save caioerick/552d226cbe576abd0e6f to your computer and use it in GitHub Desktop.
Download ZIP
Efeito Parallax em HTML / CSS / JavaScript - Background movendo lentamente ao rolar a página.
Raw
parallax.html
<html>
<head>
<title>Backgruound movendo lentamente</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.bgParallax').each(function(){
var $obj = $(this);
$(window).scroll(function() {
var yPos = -($(window).scrollTop() / $obj.data('speed'));
var bgpos = '50% '+ yPos + 'px';
$obj.css('background-position', bgpos );
});
});
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height:100%; font-family: Arial; }
.bgParallax {
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
min-height: 100%;
background-position: 50% 0;
background-repeat: repeat;
background-attachment: fixed;
}
#principal {
height: 1400px;
background-image: url(http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg);
background-color: #3CA2D2;
background: position: center center;
}
#conteudo {
position: absolute;
bottom: 0;
width: 100%;
background: #fff;
padding: 30px 0 30px 0;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="principal" class="bgParallax" data-speed="2">
</div>
<br/><br/><br/><br/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment