A Pen by William Riley.

A-Pen-by-William-Riley.markdown

A Pen by William Riley

A Pen by William Riley on CodePen.

License.

index.html

<article class="body">
  
  <header>Mash the Keyboard</header>
  
  <!-- dummy content -->
  <section>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius massa cursus tincidunt rhoncus. Vestibulum ullamcorper luctus felis, id porttitor nulla tincidunt sed. Nam vulputate diam nunc. Cras ullamcorper imperdiet erat eu luctus. Sed justo urna, ultricies vitae interdum sed, iaculis quis eros. Duis porta suscipit vulputate. Praesent quis massa dignissim, elementum purus aliquam, pharetra tellus. Donec vestibulum, odio quis ullamcorper ullamcorper, nibh quam varius ante, a porta eros arcu vel libero. Mauris et nunc ac neque eleifend malesuada. Integer ut velit id ipsum iaculis luctus. Donec nec leo scelerisque, gravida est quis, placerat eros. Morbi mi massa, suscipit in eros et, dapibus consectetur erat.</div>
  </section>
  
  <footer>Footer</footer>
  
</article>

script.js

// Now for the parallaxing -- here we use some cool CSS3 stuff to find the position of the window.

// jQuery doesn't have a scrollBottom function to detect how far away the scrolling window is from the bottom, so let's create that:
var scrollBottom = function(){
	  return $(document).height() - $(window).height() - $(window).scrollTop();
}

// When everything is loaded...
$(document).ready(function(){
  
  // Listen for the user to scroll...
  $(window).scroll(function(){
    
    // Parallax the header (keep in mind the minus sign)...
    $('header').css({ transform: "translateY(-" + $(window).scrollTop() / 2 + "px)" });
    
    // ...and parallax the footer! (No minus sign here!)
    $('footer').css({ transform: "translateY(" + scrollBottom() / 2 + "px)" });
  });
  
  // We divide the "$(window).scrollTop()" and "scrollBottom()" numbers by half because we want the content to scroll at half speed. Feel free to play with these numbers -- they can have some real cool effects. 
  
  
});

style.scss

@import "compass";
// For this site, we let the browser know we're using the entire page. Setting width and height to 100% on the html and body tags eliminate some default styling that don't allow you to build full page experiences. 
html, body { width: 100%; height: 100% }

article {
  
  // Set the article to the full page experience. 
  height: 100%;
  width: 100%;
  
  // Set an invisible area above and below where the article content can peek above the footer and header. This needs to be the same height as the footer/header. 
  margin-top: 100px;
  padding-bottom: 100px;
  
  header, footer {
    // Setting the header and footer to position: fixed means they're attached to the window position (allows the peeking) -- PLUS, the parent article doesn't take the height of these two dudes into account when calculating its height.  
    position: fixed;
    
    // Set the height to the size of the articles margin. 
    height: 100px;
    
    // Full width so we can make the text align to the right. 
    width: 100%;
    display: block;
    font-size: 65px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: -.05em;
  }
  
  header {
    // Attach the header to the top of the window. 
    top: 0;
    
    // z-index is the position the element is in the stack. Thinking of it like stacking pages of paper, this is the bottom page. 
    z-index: 1;
    text-align: right;
  }
  
  footer {
    // Attach the footer to the bottom of the window. 
    bottom: 0;
    
    // Keeping with the paper metaphor, this is on top of the first page, the header. 
    z-index: 2;
  }
  section {
    // Set this to relative so the article's height is calculated based on this. 
    position: relative;
    // Paper metaphor; This is on top of the third page, the footer. 
    z-index: 3;
    height: 100%;
    display: block;
    background-color: rgba(225,225,225,1);
    
    .content {
      width: 650px;
      padding-top: 15px;
      margin: 0 auto; 
    }
  }
}