pm prototyping

index.html

html
  body
    .container
      header
        nav navbar
        div Adjective, SEO description  – San Francisco Townhomes & Apartment Living.
      
      nav.sticky
        ul
          li
            a.active(href='#section1') 
              span More Than a Place to Live
          li
            a(href='#section2')
              span Place Roots
          li
            a(href='#section3') 
              span All You Need
          li
            a(href='#section4') 
              span Culture & Events 
          li
            a(href='#section5') 
              span Pet Friendly 
          li
            a(href='#section5') 
              span Family Friendly 
          li
            a(href='#section5') 
              span The Great Outdoors
          li
            a(href='#section5') 
              span The Vision              
            
      section.section-1
        a#section1
        article
          .copy
            h2 More than a place to live.
            p
              | Ut sed ullamcorper eros. Vivamus ac tempus odio. Aenean lacinia sagittis eros, at ultricies est pulvinar ac. Proin in ex ac urna interdum volutpat in in justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed volutpat magna vitae libero molestie tempor
            p button
        figure
        
      section.section-2
        a#section2
        article
          .copy
            h2 Culture & Events.
            p
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris tellus, faucibus sed diam vel, efficitur egestas dolor. Ut sed ullamcorper eros. Vivamus ac tempus odio. Aenean lacinia sagittis eros, at ultricies est pulvinar ac. Proin in ex ac urna interdum volutpat in in justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed volutpat magna vitae libero molestie tempor
            p button
        figure
       
      section.section-3
        a#section3
        article
          .copy
            h2 The Great Outdoors.
            p
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris tellus, faucibus sed diam vel, efficitur egestas dolor. Ut sed ullamcorper eros. Vivamus ac tempus odio. Aenean lacinia sagittis eros, at ultricies est pulvinar ac. Proin in ex ac urna interdum volutpat in in justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed volutpat magna vitae libero molestie tempor
            p button
        figure
        
      section.section-4
        a#section4
        article
          .copy
            h2 Family First.
            p
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris tellus, faucibus sed diam vel, efficitur egestas dolor. Ut sed ullamcorper eros. Vivamus ac tempus odio. Aenean lacinia sagittis eros, at ultricies est pulvinar ac. Proin in ex ac urna interdum volutpat in in justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed volutpat magna vitae libero molestie tempor
            p button
        figure        

pm prototyping.markdown

pm prototyping

A Pen by Daniel Box on CodePen.

License.

script.js

// Waypoint Logic
// ======================================================
// Creates a standerd waypoint with the option of custom logic. To pass in
// the custome logic, just create a function with all the logic you would
// like to call when the waypoint is activated, then pass just the name of the
// function into this function without qoutes
// Example: createCustomWapoint('.that', 'is-active', '35%', animateThat)
function createWaypoint(element, classToToggle, offset, cb, elementTarget) {
  return jQuery(element).waypoint(function(direction) {
    jQuery(element).toggleClass(classToToggle);
    if (typeof cb !== "undefined") {
      cb(element, classToToggle, offset, cb, direction, elementTarget);
    }
  }, {offset: offset});
}

// A loop for standerd waypoint creation. Also has the ability to pass in custom
// logic, and classToToggle. Both are optional.
// Example: waypointer(['.that', '#that', '#this'], 'resolved', '10%', animate);
function waypointer(elementArray, classToToggle, offset, cb, elementTarget) {

  for (var i=0; i < elementArray.length; i++) {
    createWaypoint(elementArray[i], classToToggle, offset, cb, elementTarget);
  }
  return true;
}


waypointer(['.section-1'], 'resolved', '50%');
waypointer(['.section-1'], 'exit', '-40%');
waypointer(['.section-2'], 'resolved', '50%');
waypointer(['.section-2'], 'exit', '-40%');
waypointer(['.section-3'], 'resolved', '50%');
waypointer(['.section-3'], 'exit', '-40%');
waypointer(['.section-4'], 'resolved', '50%');
waypointer(['.section-4'], 'exit', '-40%');

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>

style.css

// import this file to use knapsack https://raw.githubusercontent.com/kni-labs/knapsack/master/test/concat.scss
@include initialize-animation;
@include reset-elements;

$nav-height: 87px;
$sub-head: 56px;

$cinnamon: #d56f21;
$conifer: #92df40;
$pesto: #808634;
$dirt: #88652f;
$zest: #e47725;
$tangerine: #e69b00;
$dodger-blue: #33b2f7;
$indigo: #6377cf;
$pink: #f9a6da;

.container {
  max-width: 1800px;
  margin: 0 auto;
  overflow: hidden;
}
header {
  height: $nav-height + $sub-head;
  background: #fff;
  nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: $nav-height;
    background: #fff;
    box-shadow: 0 0 20px rgba(#000, .1);
    z-index: 2;
  }
  div {
    position: absolute;
    margin-top: $nav-height;
  }
}
h1 {
  @include fluid-type(30px, 40px);
}
.sticky {
  @include animated(fade-in-up);
  animation-duration: .6s;
  animation-delay: .7s;
  animation-timing-function: $ease-out-back;
  width: 180px;
  background: #fff;
  position: fixed;
  right: 5%;
  top: 35%;
  min-height: 250px;
  box-shadow: 0 1.25rem 4.5rem rgba(0, 0, 0, 0.5), 0 0.9375rem 1rem rgba(0, 0, 0, 0.4);
  z-index: 3;
  
  ul {
    li {
      a {
        border-left: 8px solid $conifer;
        transition: border .1s ease;
        letter-spacing: -.03em;
      }
      &:first-child a {
        &.active {
          color: $conifer;
          font-weight: 500;
          span {
            border-bottom: 1px solid $conifer;
          }
        }
      }
      &:nth-child(2) a {
        border-left: 8px solid $pesto;
        
        &:hover {
          color: $pesto;
          border-left: 10px solid $pesto;           
        }
      }
      &:nth-child(3) a {
        border-left: 8px solid $dirt;
        
        &:hover {
          color: $dirt;
          border-left: 10px solid $dirt;          
        }        
      }   
      &:nth-child(4) a {
        border-left: 8px solid $zest;
        
        &:hover {
          color: $zest;
          border-left: 10px solid $zest;           
        }        
      }   
      &:nth-child(5) a {
        border-left: 8px solid $tangerine;
        
        &:hover {
          color: $tangerine;
          border-left: 10px solid $tangerine;           
        }           
      } 
      &:nth-child(6) a {
        border-left: 8px solid $dodger-blue;
        &:hover {
          color: $dodger-blue;
          border-left: 10px solid $dodger-blue;          
        }           
      } 
      &:nth-child(7) a {
        border-left: 8px solid $indigo;
        
        &:hover {
          color: $indigo;
          border-left: 10px solid $indigo;          
        }         
      }  
      &:nth-child(8) a {
        border-left: 8px solid $pink;
        &:hover {
          color: $pink;
          border-left: 10px solid $pink;          
        }               
      }       
    }
  }

}
section {
  position: relative;
  @include cf();
  background: #c1bdb5;
  
 
  &:nth-of-type(2){
    background: #1b2b06;
    article {
      background: #202d0a;
    }
    figure {
      background-image: url('https://dl.dropboxusercontent.com/u/18590/exercise.jpg');
    background-position: bottom center;      
    }
  }
  
  &:nth-of-type(3){
    background: #4e9316;
    article {
      background: #72940c;
    }
    figure {
      background-image: url('https://dl.dropboxusercontent.com/u/18590/Brooks-Park-1228_094849-%281%29.jpg');     
    }    
    
  }  
  a {
    display: block;
    position: relative;
    top: -($nav-height);
    visibility: hidden;
  }
  article, figure {
    transition: all .8s $ease-out-quad;
    float: left;
    height: calc(100vh - #{$nav-height});
    min-height: 600px;
  }

  article {
    padding: 3.6%;
    width: 33%;
    background: #f0f0ed;
    display:flex;  
    // justify-content: center;  
    align-items: center;
  }
  figure {
    width: 67%;
    background-image: url('https://dl.dropboxusercontent.com/u/18590/810-Gonzalez-11C_0501_145001.jpg');
    background-size: cover;
    background-position: center center;
  }
}


.section-1, .section-2, .section-3, .section-4 {
  
  article {
    .copy {
      padding-bottom: 70px; // temporary
      h2, p {
        transform: translateY(50px);
        opacity: 0;
        transition: all .6s $ease-out-quad;
      }
      h2 {
        color: #fff; 
      }
      p {
        color: rgba(#fff, .7); 
        transition-delay: .15s;
      }
    }
  }
  article, figure {
    // transform: translateY(200px);
    opacity: .2;
   }
  &.resolved {
    article, figure {
      // transform: translateY(0);
      opacity: 1;      
    }
    article {
      .copy {
        h2, p {
          opacity: 1;
          transform: translateY(0);
        }
      }       
    }   
  }
  
  &.exit {
    article, figure {
      // transform: translateY(0);
      opacity: .2;      
    }
    article {
      .copy {
        h2, p {
          transform: translateY(-50px); 
          opacity: 0;          
        }
      }
    }
  }  
}

.section-1 {
  article {
    .copy {
      h2 {
        color: $cinnamon;
      }
      p {
        color: #999;
      }
    }
  }
}

.section-4 {
  background: #d8d9dd;
  article {
    background: lighten(#d8d9dd, 10%);
    .copy {
      h2 {
        color: $dodger-blue;
      }
      p {
        color: #999;
      }      
    }
  }
  figure {
    background-image: url('https://dl.dropboxusercontent.com/u/18590/pm-school.jpg ');
  }
}

div.copy {
  
  h2 {
    color: $cinnamon;
    font-size: 48px;
    font-weight: 100;
    line-height: 1.1em;
    margin-top: 0;
  }
  p {
    line-height: 1.4em;
    font-weight: 300;
    color: #999;  
    font-size: 15px;
  }

}

hr {
  @include rule();
}



body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans;
}

nav ul {
  @include reset-list();
  a {
    text-decoration: none;
    display: block;
    padding: 10px 15px;
    color: #999;
    font-size: 12px;
  }
}
figure {
  margin: 0;
  padding: 0;
}
table {
  @include table();
}

body, html {
  font-family: $sans;
  margin: 0;
  padding: 0;
  background: #282828;
}
pre {
  
}
h1, h2, h3, h4, h5, h5 {
  font-weight: normal;
}
body {
  color: #ccc;
}

styles

<link href="https://raw.githubusercontent.com/kni-labs/knapsack/master/test/concat.scss" rel="stylesheet" />