Skip to content

Instantly share code, notes, and snippets.

@theredstapler

theredstapler/stellar.js part 2

Created July 3, 2016 14:53
Show Gist options
  • Save theredstapler/31e95dda56150794b671a80b8a116fa6 to your computer and use it in GitHub Desktop.
Save theredstapler/31e95dda56150794b671a80b8a116fa6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
stellar.js part 2
<!doctype html>
<head>
<script src="jquery-1.11.3.js"></script>
<script src="jquery.stellar.min.js"></script>
<style>
body {
background-image: url("image/bg1.jpg");
height:2000px;
margin: 0;
}
#pic1 {
background-image: url("image/m1.png");
width: 671px;
height: 400px;
}
#pic2 {
background-image: url("image/m2.png");
width: 500px;
height: 400px;
margin-top:50px;
}
div {
background-size: 100% 100%;
background-repeat: no-repeat;
display:block;
margin: 0 auto;
}
#mask {
width: 100%;
height:50px;
background-color: #333;
position:absolute;
top: 420px;
}
</style>
</head>
<body>
<div id="pic1" data-stellar-background-ratio="0.5"></div>
<div id="pic2" data-stellar-background-ratio="1"></div>
<div id="mask"></div>
<script>
$('body').stellar({horizontalScrolling:false});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment