<svg style="display: none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="fake-📰"  viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="article_a" width="100" height="43"></rect><rect class="article_a" y="66" width="49" height="34"></rect><rect class="article_a" x="51" y="66" width="49" height="34"></rect><rect class="article_a" x="2" y="45" width="96" height="4"></rect><rect class="article_a" x="2" y="50" width="79" height="4"></rect><rect class="article_b" x="2" y="92" width="39" height="4"></rect><rect class="article_b" x="53" y="92" width="39" height="4"></rect><rect class="article_a" x="2" y="56" width="6" height="1"></rect><rect class="article_a" x="9" y="56" width="42" height="1"></rect>
  </symbol>
</svg>

<main class="parallax-container">
  <section class="parallax-child section">
    <svg class="fake-📰">
      <use xlink:href="#fake-📰" />
    </svg>

    <a href="#" class="button">
      <span class="button__text">Scroll down</span>
    </a>
  </section>
    
  <div class="parallax-child section section--alt">
    <svg class="fake-📰 fake-📰--alt">
      <use xlink:href="#fake-📰" />
    </svg>
    
    <a href="#" class="button">
      <span class="button__text">Notice the parallax?</span>
    </a>
  </div>

  <section class="parallax-child section">
    <svg class="fake-📰">
      <use xlink:href="#fake-📰" />
    </svg>
    
    <div class="divider">
      <span class="divider__bottom"></span>
      <span class="divider__front"></span>
      <span class="divider__top"></span>
      <img class="painting" src="https://i.giphy.com/d31vTpVi1LAcDvdm.gif" />
    </div>
    
    
    <a href="#" class="button">
      <span class="button__text">Skeumorphism</span>
    </a>
    
  </section>

  <section class="parallax-child section section--alt">
    <svg class="fake-📰 fake-📰--alt">
      <use xlink:href="#fake-📰" />
    </svg>

    <a href="#" class="button">
      <span class="button__text">Is back!</span>
    </a>
  </section>
</main>

@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed');

* { box-sizing: border-box }
$c-bg: #39065A;
$c-a1: #39065A;
$c-a2: #6A0572;
$c-a3: #9A0F98;
$c-a4: #EA0599;

html, body {
  background-color: $c-bg;
  overflow: hidden;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
body {
  font-size: calc(1em + 0.5vw);
}

// 1. create the css parallax container to scroll in
.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  perspective: 400px; // define the perspective to create the depth
  text-align: center;
}
.parallax-child {
  transform-style: preserve-3d; // 2. pass down the 3D perspective from the parent
}


.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 2em 0;
  background-color: $c-a2;
  &--alt {
    background-color: $c-a3;
  }
}
.section + .section { padding-top: 2em }

.button {
  transform-style: preserve-3d;  // pass down the 3D perspective from the parent
  border: none;
  color: $c-a4;
  background: linear-gradient(to bottom, $c-a4 40%, #56065d 60%); // create the top and bottom "walls" on the button
  border-radius: 1em;
  padding: 0;
  display: inline-block;
  font-family: 'Barlow Semi Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 
    0px -3px 10px 0 rgba($c-a4, 0.4), // top tight glow
    10px -15px 60px 0 rgba($c-a4, 0.3), // top large glow
    -0 3px 3px 0 rgba($c-a1, 0.3), // bottom tight shadow
    -0 15px 60px 0 rgba($c-a1, 0.3); // bottom large shadow
  position: relative;

  &__text {
    background: $c-a3;
    border-radius: 1em;
    padding: 0.4em 1.3em 0.6em;
    position: relative;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.1, 0.67, 0.31, 1);
    transform: translate3d(0,0,6px); // 3. Move the outer layer of the button in the z axis
    text-shadow: 0 0px 7px rgba($c-a4, 0.8); // add some text-glow
  }

  // Interactivity
  cursor: pointer;
  transition: box-shadow 0.4s cubic-bezier(0.1, 0.67, 0.31, 1);
  &:hover {
    box-shadow: 
      0px -1px 1px 0 rgba($c-a4, 0.1),
      10px -15px 60px 0 rgba($c-a4, 0.1),
      0px 1px 1px 0 rgba($c-a1, 0.1),
      10px 15px 60px 0 rgba($c-a1, 0.1);
    .button__text {
      transform: translate3d(0,0,1px); // animate the button in z-axis
    }
  }
  &:focus, &:active {
    outline: none;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
    .button__text {
      transform: translate3d(0,0,0);
    }
  }
}

.button + .button {
  margin-top: 2em;
}

.divider {
  transform-style: preserve-3d;  // pass down the 3D perspective from the parent
  margin: 2em 25% 4em;
  width: 50%;
  height: 10px;
  position: relative;
  background: #ead3ac;
  box-shadow: 
    0px -3px 10px 0 rgba(234, 211, 172, 0.37), // top tight glow
    10px -15px 60px 0 rgba(234, 211, 172, 0.61), // top large glow
    0 3px 3px 0 rgba(74, 29, 29, 0.38), // bottom tight shadow
    0 15px 60px 0 rgba(165, 92, 92, 0.84); // bottom large shadow

  &__top, &__front, &__bottom, .painting {
    display: block;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
  }
  &__top {
    transform: rotateX(90deg) translateZ(50px);
    background: linear-gradient(to bottom, #ca5651 0%, #ead3ac 100%);
    height: 100px;
  }
  &__front {
    transform: rotateY(0deg) translateZ(50px);
    background: #fffcd1;
    height: 10px;
  }
  &__bottom {
    transform: rotateX(-90deg) translate3D(0, 0, -40px);
    background: #a55d5d;
    height: 100px;
  }
  .painting {
    width: 150px;
    transform: rotateX(10deg) translate3D(100px, -115px, 50px);
    border: 10px solid white;
  }
  
}

.fake-📰 {
  width: 100%;
  height: 70vh;
  margin: 0 auto;
  max-width: 150vh;
  fill: $c-a3;
  padding: 2em;
  &--alt {
    fill: $c-a2;
  }
}

// debug
.section_off {
  transform: translate3d(50px, 0, -100px) rotateY(20deg);
}

// The parallax is made with CSS perspective.
// 1. The parallax-container has a perspecive and controls the page scrolling
// 2. The parallax-children is only for passing down the perspective to it's children (the perspective only affects the child, not the chils children if you're not using `transform-style: preserve-3d`)
// 3. To pop something out from the page (or inwards), I transform the Z position.

// Cred to Keith Clarc for inventing the technique: https://keithclark.co.uk/articles/pure-css-parallax-websites/