Parallax scroll effect CSS

by Amanda Williamson

HTML

<div class="parallax">
  <div class="bg__foo">foo</div>
  <div class="bg__bar">bar</div>
  <div class="bg__baz">baz</div>
  <div class="bg__bazz">bazz</div>
</div>

CSS

[class*="bg__"] {
  height: 50vh;
  text-indent: -9999px;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  &:nth-child(2n) {
    box-shadow: inset 0 0 1em #111;
  }
}
.bg__foo {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}
.bg__bar {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg);
}
.bg__baz {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg);
}
.bg__bazz {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}