BymeKV

BymeKV.markdown

BymeKV

A Pen by Suleiman Leadbitter on CodePen.

License.

index.jade

.container
  h1 Scrolling Shadows
  
  p.boxed Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolore facilis error, assumenda? Repellendus ex accusantium voluptate id non reprehenderit nesciunt, quis maiores nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias quasi rem optio fugit dignissimos laborum quas, quidem sint error. Consequuntur, nesciunt, voluptates.
  
  p.boxed Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolore facilis error, assumenda? Repellendus ex accusantium voluptate id non reprehenderit nesciunt, quis maiores nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cupiditate natus, quam!

  p.boxed Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolore facilis error, assumenda? Repellendus ex accusantium voluptate id non reprehenderit nesciunt, quis maiores nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque esse, vitae labore fuga doloribus, repellat voluptatum dignissimos inventore assumenda cum et molestias, blanditiis quis. Quas, pariatur aspernatur ut. Sit inventore omnis repudiandae odit quibusdam vel cum, officia accusantium enim, minima est incidunt consectetur laudantium! Molestias?
  
  p.boxed Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolore facilis error, assumenda? Repellendus ex accusantium voluptate id non reprehenderit nesciunt, quis maiores nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias quasi rem optio fugit dignissimos laborum quas, quidem sint error. Consequuntur, nesciunt, voluptates.
  
  p.boxed Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolore facilis error, assumenda? Repellendus ex accusantium voluptate id non reprehenderit nesciunt, quis maiores nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cupiditate natus, quam!

  p.boxed Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolore facilis error, assumenda? Repellendus ex accusantium voluptate id non reprehenderit nesciunt, quis maiores nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque esse, vitae labore fuga doloribus, repellat voluptatum dignissimos inventore assumenda cum et molestias, blanditiis quis. Quas, pariatur aspernatur ut. Sit inventore omnis repudiandae odit quibusdam vel cum, officia accusantium enim, minima est incidunt consectetur laudantium! Molestias?
  

script.js

var pageHeight = (function () {
    return Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.offsetHeight,
        document.body.clientHeight,
        document.documentElement.clientHeight
    );
})();
var el = document.getElementByClass('boxed');
var elPos = el.getBoundingClientRect();
// getBoundingClientRect() returns an object:
// {
//  bottom: value,
//  height: value,
//  left: value,
//  right: value,
//  top: value,
//  width: value
// }

// Don't need to set another variable, but I like to 
// to help keep things straight.
var elTop = elPos.top;

// This will give the element a class if 
// it's on the bottom half of the page.
if ( ((elTop / pageHeight)*100) > 20 ) {
 el.setAttribute('class', 'top');
}
if ( ((elTop / pageHeight)*100) > 30 ) {
 el.setAttribute('class', 'almosttop');
}
if ( ((elTop / pageHeight)*100) > 45 ) {
 el.setAttribute('class', 'midtop');
}
if ( ((elTop / pageHeight)*100) > 60 ) {
 el.setAttribute('class', 'midbottom');
}
if ( ((elTop / pageHeight)*100) > 80 ) {
 el.setAttribute('class', 'almostbottom');
}
if ( ((elTop / pageHeight)*100) > 100 ) {
 el.setAttribute('class', 'bottom');
}

style.scss

@import "bourbon";
body {
  background-color: #E1E1E1;
}

h1 {
  text-align: center;
  margin: 1em 0 3em 0;
  color: white;
  text-shadow: 0px 6px 2px rgba(black, 0.15);
}

p {
  line-height: 1.4em;
  letter-spacing: 0.15em;
}

.container {
  max-width: 800px;
  margin: 20px auto;
  background-color: tomato;
  padding: 2rem;
  color: #333;
  box-shadow: 0px 4px 8px rgba(black, 0.3);
}

.boxed {
  background-color: #E1E1E1;
  border-top: 1px solid rgba(white, 0.7);
  border-bottom: 1px solid rgba(black, 0.2);
  padding: 2rem;
  margin: 4em 0;
/*   box-shadow: 0px 4px 8px rgba(black, 0.3); */
}

.top           {box-shadow: 0px 6px 18px rgba(black, 0.3);}
.almosttop     {box-shadow: 0px 4px 8px rgba(black, 0.3);}
.midtop        {box-shadow: 0px 2px 8px rgba(black, 0.3);}
.midbottom     {box-shadow: 0px 1px 8px rgba(black, 0.3);}
.almostbottom  {box-shadow: 0px -4px 8px rgba(black, 0.3);}
.bottom        {box-shadow: 0px -6px 8px rgba(black, 0.3);}