Skip to content

Instantly share code, notes, and snippets.

@CarmenScholte

CarmenScholte/paralax-example.html

Created October 5, 2019 11:15
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 CarmenScholte/0003b0975516fef8c4c7d91b92452cdb to your computer and use it in GitHub Desktop.
Save CarmenScholte/0003b0975516fef8c4c7d91b92452cdb to your computer and use it in GitHub Desktop.
Download ZIP
paralax-example
Raw
paralax-example.html
<!doctype html>
<html>
<head>
<title>Paralax example</title>
<style>
body {
color: white;
font-size: 24px;
font-family: sans-serif;
margin: 0;
height: 100%;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
.one {
height: 100vh;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2200&q=80");
background-size: cover;
}
.two {
height: 400px;
width: 100%;
background-color: darkslategrey;
}
.three {
height: 600px;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1477420143023-6a0e0b04b69a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
background-size: cover;
}
.four {
height: 400px;
width: 100%;
background-color: darkslategrey;
}
.five {
height: 100vh;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2182&q=80");
background-size: cover;
}
.paralax-bg {
background-attachment: fixed
}
</style>
</head>
<body>
<div class="one paralax-bg">
<span>Some text</span>
</div>
<div class="two">
<span>Some more text</span>
</div>
<div class="three paralax-bg">
<span>Some more text</span>
</div>
<div class="four">
<span>Some more text</span>
</div>
<div class="five paralax-bg">
<span>Some more text</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment