<!--
Working through DevTips - "Parallax on the Web" series
-->
<header class="header">
  <div class="logo"></div>
  <div class="elm1"></div>
</header>

<section class="content">
  <h1>Patterns</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  
  <div class="item-pics">
    <figure class="item">
      <img src="https://s-media-cache-ak0.pinimg.com/564x/4e/a6/3e/4ea63e12fdc0d696365a44161d0cb3c8.jpg" alt="Triangle Pattern 1" />
      <figcaption>Triangle Pattern 1</figcaption>
    </figure>
    <figure class="item">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/12/0f/ae/120faef5b9ba249ad87af449d7d0ed3f.jpg" alt="Triangle Pattern 2" />
      <figcaption>Triangle Pattern 2</figcaption>
    </figure>
    <figure class="item">
      <img src="https://s-media-cache-ak0.pinimg.com/originals/75/61/a7/7561a703722a5384402b5f914d4cd492.jpg" alt="Triangle Pattern 3" />
      <figcaption>Triangle Pattern 3</figcaption>
    </figure>
    <figure class="item">
      <img src="http://devfloat.net/wp-content/uploads/2016/01/orange-triangle-pattern.jpg" alt="Triangle Pattern 4" />
      <figcaption>Triangle Pattern 4</figcaption>
    </figure>
  </div>
  
  <h1>More Patterns</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  <div class="par-window">
    <div class="tint">
      <div class="promo-text">
        Patterns
        <strong><span>from </span>$10</strong>
        <a href="" class="cta">Shop Now</a>
      </div>
    </div>  
  </div>
  
  <div class="dummySpace"></div>
</section>


 

@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Raleway:200,300,400');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  line-height: 1.6;
  font-family: Raleway, sans-serif;
  font-weight: 200;
}


.header {
  $headerHeight: 400px;
  position: relative;
  height: $headerHeight;
  overflow: hidden;
  z-index: -3;
  background: null {
     color: blue;
     image: url(https://s-media-cache-ak0.pinimg.com/originals/89/ba/ae/89baaec3227c63044d8d715b7388f8b7.png);
     position: top center;
     size: 100% $headerHeight;
     repeat: no-repeat;
     attachment: fixed;
   }

  .logo {
    height: 50px;
    width: 100px;
    position: absolute;
    bottom: 20px;
    right: 10%;
    z-index: -1;
    background: null {
      image: url(https://blog.codepen.io/wp-content/uploads/2012/06/MadeFor-Codepen.svg);
      position: center;
      size: contain;
      repeat: no-repeat;
    }
  }
  .elm1 {
    $size: 100px;
    height: $size;
    width: $size;
    position: absolute;
    top: 50%;
    margin-top: -$size/2;
    right: 50%;
    margin-right: -$size/2;
    z-index: -2;
    background: null {       
        image: url(http://vignette4.wikia.nocookie.net/uncyclopedia/images/c/c1/Penrose_triangle.png/revision/latest?cb=20071127055921);
        position: center;
        size: contain;
        repeat: no-repeat;
      }
  }
}

.item-pics {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  max-width: 700px;
  margin: auto;
  position: relative;
  figure {
    position: relative;
    width: 200px;
    margin: 20px;
    opacity: 0;
    overflow: hidden;
    cursor: pointer;
    transform: translateX(20px);
    transition: all 1s;
    &.is-showing {
      opacity: 1;
      transform: translateX(0px);
    }
    &:hover {
      figcaption {
       left: 0%;
      }
      img {
        transform: scale(1.1);
      }
    }
    img {
      display: block;
      width: 100%;
      height: 150px;
      object-fit: cover;
      transform: scale(1);
      transition: all 0.3s ease-in-out;
        
    }
    figcaption {
      position: absolute;
      bottom: 5px;
      left: -100%;
      padding: 4px;
      background: black;
      color: white;
      text-align: center;
      font-family: Raleway, sans-serif;
      font-size: 13px;
      transition: all 0.3s ease-in-out;
    }
  }
}

.par-window {
  position: relative;
  height: 300px;
  margin-top: 20px;
  background: {
    image: url(https://s-media-cache-ak0.pinimg.com/originals/94/4d/e5/944de57dc26bb31b024e68a57727ef24.jpg);
    position: center;
    attachment: fixed;
  }
  .tint {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .promo-text {
    color: white;
    font-weight: 100;
    font-size: 40px;
    text-align: center;
    strong {
      display: block;
      font-size: 25px;
    }
    span {
      font-weight: 200;
      font-size: 18px;
      padding: 5px;
      font-style: italic;
      color: rgba(255,255,255,0.8)
    }
    .cta {
      font-size: 20px;
      text-decoration: none;
      color: white;
      border: 1px solid white;
      padding: 10px 20px;
      transition: all 0.2s ease-in-out;
      &:hover {
        background: white;
        color: black;
      }
    }
  }

  
}


//text styling
h1 {
  padding: 10px;
  text-align: center;
  font-family: Playfair Display, serif;
}

p {
  max-width: 600px;
  margin: auto;
  padding: 10px 20px;
  font-size: 19px;
}

.dummySpace {
  height: 2000px;
}

function mainBannerScroll(scroll) {
  $('.elm1').css({
    'transform' : 'translate(0px, -'+ scroll/2 +'%)',
    'transform' : 'rotate(' + scroll/2 +'deg)'
  });
}

function itemsParallax(scroll) {
  var $photoDiv = $('.item-pics');
  var threshold = $photoDiv.offset().top - $(window).height();
  if (scroll > threshold ) {
    $('.item-pics figure').each(function(i) {
      setTimeout(function() {
        $('.item-pics figure').eq(i).addClass('is-showing'); 
      }, 50 * (i + 1))
    }) 
  }
} 

function windowParallax(scroll) {
  var $target = $(".par-window");
  var offset = $target.offset().top;
  var threshold =  offset - $(window).height()
  var opacity = (scroll - offset + 500) / (scroll/4)
  
  if (scroll > threshold) {
    console.log("ya")
    $target.css({
      'background-position':'center '+ (scroll/5 - offset) +'px'
    })
    $('.tint').css({
      'opacity': opacity
    })
  }
}


$(document).ready(function() {
    $(window).scroll(function() {
      var wScroll = $(this).scrollTop();
      // console.log(wScroll);
      mainBannerScroll(wScroll);
      itemsParallax(wScroll);
      windowParallax(wScroll);
    });
});