<section class="content">
  
  <div class="content-hero">
    <h1>CSS Fixed Backgrounds</h1>
  </div>
  
  <div class="content-block arrw">
    <article>
      <h2>Things to craft with background-attachment:fixed</h2>
      <p>While writing this <a href="https://codepen.io/Hornebom/pen/xbzMVz" target="_blank">horizontal scrolling pen</a>, I discoverd that <code>background-attachment:fixed</code> offers two nice effects to play around with. On the one hand we can create a simple parallax effect and on the other hand we can let elements fade in/out while scrolling. It's worth noting, that these tricks won't work on mobile devices due to the fact that <code>background-attachment:fixed</code> isn't <a href="http://stackoverflow.com/questions/19045364/fixed-body-background-scrolls-with-the-page-on-ios7" target="_blank">supported</a>. Furthermore, this pen uses transforms, so don't expect it to work on non supported browsers.</p>
      <h3>Fade in/out</h3>
      <p>Have a look at the little down pointing arrow - while scrolling it will slightly fade in/out. That's a no brainer. Just consider two elements stacked on each other, while the one above has a gradient background, filling it from one solid color to transparent + this background is fixed. the same techniques is use at the very bottom - see the happy guy fading in? That's it.</p>
      <h3>Parallax</h3>
      <p>As you may noticed, the white blocks next to main headline sroll at a higher speed. The blocks are actually simple background-images inside pseudo-elements. The pseudo-elemtes themselfs are rotated for 180deg and layered by <code>z-index</code>. To achive different speeds, you just have to scale one of them. This does the trick for our parallax effect. Quite easy, right?</p>
    </article>
  </div>
  
  <div class="content-block">
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/kids.svg" alt="" />
    </figure>
  </div>
  
  <div class="content-block">
    <h1>CSS FTW</h1>
  </div>
  
  <div class="content-block"></div>
  
</section>

@import url('https://fonts.googleapis.com/css?family=Federo');

$spot-1:#d0d0bb;

*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html, body {
  width:100%;
  height:100%;
}

body {
  background-color:$spot-1;
  font-family: 'Federo', sans-serif;
  font-size:1.2rem;
  line-height:1.4;
  color:#222;
}

.content {
  border:2vw solid white;
}

div[class^="content-"] {
  position:relative;
  height:100vh;
  min-height:100vh;
  display:flex;
}

.content-block figure {
  margin:auto;
  width:50%;
  
  img {
    display:block;
    width:100%;
  }
}

// tehe very first content block
.content-hero {
  overflow:hidden;
  z-index:1;
  
  &:before, &:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:linear-gradient(white, white);
    background-repeat:no-repeat;
    background-size:30%;
    background-attachment:fixed;
  }
  
  &:before {
    z-index:2;
    transform:rotate(180deg) translateY(0%);  
    background-size:50% 10vh;
    background-position:100% 15%;
  }
  
  &:after {
    z-index:-1;
    transform:rotate(180deg) scale(0.5) translateX(-50%);
    background-size:100% 15vh;
    background-position:20% 40%;
  }
}

.content-block article {
  width:100%;
  max-width:50rem;
  padding:0 5vw;
  margin:auto;
}



.arrw {
  
  &:before {
    content:'\2193';
    position:absolute;
    top:-10vh;
    left:50%;
    width:2vw;
    margin-left:-1vw;
    font-size:3vw;
  }
  
  &:after {
    content:'';
    position:absolute;
    top:-20vh;
    left:50%;
    width:5vw;
    height:20vh;
    margin-left:-2.5vw;
    background-image:linear-gradient($spot-1, rgba($spot-1, 0));
    background-attachment:fixed;
  }
}



.content-block:nth-child(3) {
  background-image:
    linear-gradient($spot-1, $spot-1),
    linear-gradient(white, white);
  background-repeat:no-repeat;
  background-size:100% 20%, 40vw 40vw;
  background-position:50% 0, 50% 50%;
  background-attachment:scroll, fixed;
}

.content-block:nth-child(4) {
  background-image:
    linear-gradient(white, white),
    linear-gradient(white, white);
  background-repeat:no-repeat;
  background-size:30vw 60vh, 30vw 30vw;
  background-position:0 20vh, 100% 50%;
  background-attachment:fixed;
}

.content-block:nth-child(5) {
  overflow:hidden;
  background-image:
    linear-gradient($spot-1, rgba($spot-1, 0)),
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/blindman.svg');
  background-repeat:no-repeat;
  background-size:100% 50%, 25% auto;
  background-position:50% 0, 45% 90%;
  background-attachment:scroll, fixed;
  
  &:after {
    content:'';
    position:absolute;
    bottom:-30vw;
    left:18vw;
    width:60vw;
    height:60vw;
    background-color:white;
    transform:rotate(45deg);
    z-index:-1;
  }
}


//////// Typo Styles

h1 {
  width:80%;
  margin:auto;
  font-size:9vw;
  text-align:center;
  font-weight:normal;
  text-transform:uppercase;
  color:#222;
  transform:translateY(-15%);
}

h2 {
  font-size:1.6rem;
  margin-bottom:1rem;
}

h3 {
  font-size:1.2rem;
  text-transform:uppercase;
}

p {margin-bottom:1rem;}
a {
  color:#666;
  text-decoration:none;
}