A Pen by foleyatwork.

Fade-on-Scroll.markdown

Fade on Scroll

A Pen by foleyatwork on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300' rel='stylesheet' type='text/css'>
  
  <div id="scroll-pos"></div>
  
<div class="background" id="background">
  <img src="http://37.media.tumblr.com/896656ef638e8bc5db3f6c148d70d9d5/tumblr_n5e5qd8BB81st5lhmo1_1280.jpg">  
</div>

<header>
  <svg><path d="M62.146,49.999L92.364,19.78c1.159-1.159,1.159-3.037,0-4.195l-7.95-7.95c-1.158-1.158-3.036-1.158-4.195,0L50,37.854  L19.781,7.635c-1.158-1.158-3.037-1.158-4.196,0l-7.95,7.95c-1.159,1.158-1.159,3.036,0,4.195l30.219,30.219L7.636,80.219  c-1.16,1.159-1.16,3.037,0,4.195l7.949,7.95c1.159,1.159,3.038,1.159,4.196,0L50,62.146l30.218,30.218  c1.159,1.159,3.037,1.159,4.195,0l7.95-7.95c1.159-1.158,1.159-3.036,0-4.195L62.146,49.999z"></path></svg>
</header>
  
<main>
  <article>
    <h1>Odd Future street art hoodie readymade.</h1>
    <p>Ethical pug hella church-key forage seitan, cred American Apparel typewriter Tumblr fap fixie. Etsy synth meh raw denim lomo seitan. Thundercats kale chips swag, aesthetic Pitchfork readymade flannel slow-carb Cosby sweater authentic food truck.</p>
  </article>
</main>
  
<main>
  <article>
    <h1>High Life Bushwick hoodie occupy letterpress direct trade +1.</h1>
    <p>Raw denim leggings Shoreditch freegan, banh mi Echo Park Wes Anderson brunch sartorial. Blue Bottle Schlitz pour-over direct trade irony, literally gastropub next level mustache Cosby sweater tote bag viral locavore.</p>
  </article>
</main>

script.js

(function () {
  var img = document.getElementById('background'), opacity;
  var min = 0.15;
  
  function setBackgroundOpacity () {
    opacity = 1 - window.scrollY / (screen.height + 100);
    img.style.opacity = opacity > min ? opacity : min;
  }
  
  window.addEventListener('scroll', setBackgroundOpacity);
})();

style.sass

html, body
  height: 100%

body
  background-color: #222
  color: #bbb
  font-family: Merriweather
  font-size: .9em
  line-height: 1.8em
  margin: 0
  padding: 30px

h1
  color: white

.background, header
  height: 100%
  overflow: hidden
  width: 100%

.background
  position: fixed
  top: 0
  left: 0
  transform: translatez(0)

.background img
  min-width: 100%
  min-height: 100%

svg
  position: absolute
  top: 50%
  left: 50%
  margin-left: -50px
  margin-top: -50px
  width: 100px
  height: 100px

path
  fill: white
  opacity: 0.7

main
  display: table
  height: 100%
  width: 100%

article
  display: table-cell
  position: relative
  vertical-align: middle

h1, p
  max-width: 500px
  margin-left: auto
  margin-right: auto