Skip to content

Instantly share code, notes, and snippets.

@maurostorch

maurostorch/parallax.html

Last active June 26, 2017 23:50
Show Gist options
  • Save maurostorch/98e36256c11953fdbf2543bc0d5b3ae9 to your computer and use it in GitHub Desktop.
Save maurostorch/98e36256c11953fdbf2543bc0d5b3ae9 to your computer and use it in GitHub Desktop.
Download ZIP
Parallax with jQuery
Raw
parallax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style media="screen">
html, body{
width: 100%;
height: 100%;
margin: 0;
}
body{
overflow-x: hidden;
}
.top{
height: 200px;
background-color: #bdc3c7;
}
.parallax-container{
position: relative;
width: 100%;
height: 300px;
}
.parallax{
position: absolute;
top: 10;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
height: 100%;
background-size: cover;
/*background-position: 0 0;*/
display: flex;
align-items: center;
justify-content: flex-end;
}
.m1{
background-image: url('http://www.loucoporviagens.com.br/wp-content/uploads/2014/11/montreal-1.jpg');
}
.m2{
background-image: url('https://www.interstude.com/wp-content/uploads/2014/02/4-Montreal-Olympic-Stadium.jpg');
}
.textbanner{
text-transform: uppercase;
font-family: sans-serif;
background-color: rgba(10,10,10,0.5);
font-size: 3em;
margin-right: 2em;
padding: 0.4em;
color: #ecf0f1;
}
</style>
</head>
<body>
<div class="top">
</div>
<div class="parallax-container">
<div class="parallax m1">
<div class="textbanner">
this is the first view.
</div>
</div>
</div>
<div class="top">
</div>
<div class="parallax-container">
<div class="parallax m2">
<div class="textbanner">
the second view is here!!!
</div>
</div>
</div>
<div class="top">
</div>
<script type="text/javascript">
$(document).ready(function(){
var v = $(window).scrollTop();
$('.parallax').css('background-position','0 -'+(v*(0.7))+'px');
$(document).scroll(function(e){
var v = $(window).scrollTop();
$('.parallax').css('background-position','0 -'+(v*(0.7))+'px');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment