123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              nav
  ul
    li.logo
      a(href="#") 
        span Helix Cup
    li
      a.selected(href="#") 
        span Challenges
    li
      a(href="#") 
        span Teams
    li
      a(href="#") 
        span Standings
    li.profile
      a(href="#") 
        span Jessica Hische
        .photo
        
.challenge-banner
  .challenge-img
  header
    .challenge-icon
      svg(version="1.1", width="63px", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", x="0px", y="0px", viewbox="0 0 63 31", enable-background="new 0 0 63 31", xml:space="preserve")
        path.bridge(fill="none", stroke="#ffffff", stroke-opacity="0.3", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", stroke-miterlimit="10", d="M9,23v-8 M23,23v-8 M31,23v-6 M40,23v-8 M54,23v-8")
        path.bridge(fill="none", stroke="#bbd5ee", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", stroke-miterlimit="10", d="M1,17c8.6,0,15-7.2,15-15.8C16,9.8,22.4,17,31,17S47,9.8,47,1.2C47,9.8,53.4,17,62,17")
        path.bridge(fill="none", stroke="#4c6ebd", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", stroke-miterlimit="10", d="M1,23h61")
        path.bridge(fill="none", stroke="#c4ad9a", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", stroke-miterlimit="10", d="M16,1l0,29 M47,30l0-29 M14,30h4 M45,30h4")
        


    h2.challenge-title Building Bridges to Healthcare
    p.date-range 
      span.icon-calendar
      | Jan 27 - Feb 3
  .tabs
    .wrap.row
      .col-1.tab.selected 
        div Challenge Details &#38; Curriculum
      .col-1.tab
        div Team Results
      .col-1.tab 
        div Challenge Standings
section
  .content-details.wrap.row
    .scenario.col-3
      h3 Scenario
      p
        | One major hurdle in healthcare is physical access to both #[a(href="#") medical supplies], and trained healthcare professionals.  Overcoming this hurdle means making sure that medical supplies are transported where they are needed, and that patients can safely travel to health care providers, or that trained nurses and doctors can travel to them. For areas that are geographically isolated by rivers, gorges, seasonal flooding, or a natural disaster, bridges are an important part of that solution. A bridge over the river would solve all of these health care problems. #[a(href="#") Bridges to Prosperity], a nonprofit which aims to build bridges across impassable rivers to isolated communities around the world, reports a 24% increase in healthcare treatment after the construction of bridges in these communities.
      p
        | Building a bridge in an isolated area, or after a big disaster, can be difficult; it may be very tricky, given the local terrain, and too expensive to bring in heavy equipment and lots of supplies.  Instead, the supplies and labor often have to fit in just a few pickup trucks, be brought in by mule, or even brought in on people's backs.  Because of this, the materials must be as lightweight as possible.  At the same time, you still want the bridge to be able to hold as great a load as possible so that it can be useful to the community now and as the community and its traffic grows.
        
    .resources.col-2
      h3
        span 7 
        | Challenge Resources
      div
        .resources-header.row
          .col-1
            //img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/book-badge.svg", alt="")
            svg(id="book-badge", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", preserveaspectratio="xMidYMid", width="84", height="94", viewbox="0 0 84 94")
              g
                path(fill="#ffffff", d="M37.612,92.805 C37.612,92.805 4.487,73.709 4.487,73.709 C1.736,72.123 0.038,69.191 0.036,66.023 C0.036,66.023 0.009,27.877 0.009,27.877 C0.007,24.723 1.686,21.814 4.415,20.243 C4.415,20.243 37.558,1.167 37.558,1.167 C40.288,-0.404 43.654,-0.399 46.393,1.180 C46.393,1.180 79.517,20.276 79.517,20.276 C82.268,21.862 83.966,24.794 83.968,27.962 C83.968,27.962 83.995,66.108 83.995,66.108 C83.997,69.262 82.318,72.171 79.589,73.742 C79.589,73.742 46.446,92.818 46.446,92.818 C43.717,94.389 40.350,94.384 37.612,92.805 Z", fill-rule="evenodd")
                g.book-1
                  path(fill="#4f93f9", d="M31.000,29.000 C31.000,29.000 35.000,29.000 35.000,29.000 C36.105,29.000 37.000,29.895 37.000,31.000 C37.000,31.000 37.000,60.000 37.000,60.000 C37.000,61.105 36.105,62.000 35.000,62.000 C35.000,62.000 31.000,62.000 31.000,62.000 C29.895,62.000 29.000,61.105 29.000,60.000 C29.000,60.000 29.000,31.000 29.000,31.000 C29.000,29.895 29.895,29.000 31.000,29.000 Z", fill-rule="evenodd")
                  path(fill="#b7cff3", d="M34.000,36.000 C34.000,36.000 32.000,36.000 32.000,36.000 C31.448,36.000 31.000,35.552 31.000,35.000 C31.000,34.448 31.448,34.000 32.000,34.000 C32.000,34.000 34.000,34.000 34.000,34.000 C34.552,34.000 35.000,34.448 35.000,35.000 C35.000,35.552 34.552,36.000 34.000,36.000 ZM32.000,37.000 C32.000,37.000 34.000,37.000 34.000,37.000 C34.552,37.000 35.000,37.448 35.000,38.000 C35.000,38.552 34.552,39.000 34.000,39.000 C34.000,39.000 32.000,39.000 32.000,39.000 C31.448,39.000 31.000,38.552 31.000,38.000 C31.000,37.448 31.448,37.000 32.000,37.000 Z", fill-rule="evenodd") 
                g.book-2
                  path(fill="#ff914e", d="M39.000,34.000 C39.000,34.000 45.000,34.000 45.000,34.000 C46.105,34.000 47.000,34.895 47.000,36.000 C47.000,36.000 47.000,60.000 47.000,60.000 C47.000,61.105 46.105,62.000 45.000,62.000 C45.000,62.000 39.000,62.000 39.000,62.000 C37.895,62.000 37.000,61.105 37.000,60.000 C37.000,60.000 37.000,36.000 37.000,36.000 C37.000,34.895 37.895,34.000 39.000,34.000 Z", fill-rule="evenodd")
                  path(fill="#cd5d47", d="M42.000,38.000 C43.105,38.000 44.000,38.895 44.000,40.000 C44.000,41.105 43.105,42.000 42.000,42.000 C40.895,42.000 40.000,41.105 40.000,40.000 C40.000,38.895 40.895,38.000 42.000,38.000 Z", fill-rule="evenodd")
                g.book-3  
                  path(fill="#ff4e4e", d="m49,32c0,0 2,0 2,0c1.105,0 2,0.858776 2,1.919052c0,0 0,25.907204 0,25.907204c0,1.060276 -0.895,1.919052 -2,1.919052c0,0 -2,0 -2,0c-1.105,0 -2,-0.858776 -2,-1.919052c0,0 0,-25.907204 0,-25.907204c0,-1.060276 0.895,-1.919052 2,-1.919052z", fill-rule="evenodd")
                  path(fill="#d43150", d="M50.000,35.000 C50.552,35.000 51.000,35.448 51.000,36.000 C51.000,36.000 51.000,38.000 51.000,38.000 C51.000,38.552 50.552,39.000 50.000,39.000 C49.448,39.000 49.000,38.552 49.000,38.000 C49.000,38.000 49.000,36.000 49.000,36.000 C49.000,35.448 49.448,35.000 50.000,35.000 Z", fill-rule="evenodd")
                g
                  path.shelf(fill="#ae7d6a", d="M21.000,60.000 C21.000,60.000 61.000,60.000 61.000,60.000 C62.105,60.000 63.000,60.895 63.000,62.000 C63.000,63.105 62.105,64.000 61.000,64.000 C61.000,64.000 21.000,64.000 21.000,64.000 C19.895,64.000 19.000,63.105 19.000,62.000 C19.000,60.895 19.895,60.000 21.000,60.000 Z", fill-rule="evenodd")
                  path(fill="#865c54", d="M51.500,67.000 C50.672,67.000 50.000,66.328 50.000,65.500 C50.000,65.500 50.000,64.000 50.000,64.000 C50.000,64.000 53.000,64.000 53.000,64.000 C53.000,64.000 53.000,65.500 53.000,65.500 C53.000,66.328 52.328,67.000 51.500,67.000 ZM30.500,67.000 C29.672,67.000 29.000,66.328 29.000,65.500 C29.000,65.500 29.000,64.000 29.000,64.000 C29.000,64.000 32.000,64.000 32.000,64.000 C32.000,64.000 32.000,65.500 32.000,65.500 C32.000,66.328 31.328,67.000 30.500,67.000 Z", fill-rule="evenodd")

          .resources-description.col-3
            | These files will give you everything you need to prepare for the challenge.
          
        .file-list
          h4 For Teachers
          .file
            span.icon-ppt
            | Scenario
          .file
            span.icon-pdf
            | Purchasing Guidelines
          .file
            span.icon-pdf
            | Teacher Instructions
          .file
            span.icon-word
            | Judging Rubric
          .file
            span.icon-pdf
            | Volunteer Guidelines
        .file-list
          h4 For Students
          .file
            span.icon-pdf
            a(href="https://docs.google.com/file/d/0B5o5zWbCzVCnV2tSQmk3bWZQUG8/edit?pli=1", target="_blank") Student Worksheet
          .file
            span.icon-pdf
            | Student Challenge Cost Table
          .file
            span.icon-pdf
            | Student Reflections
        .button-cta
          button.button.primary
            | Download All
            span.icon-arrow-down
            
  .content-results.wrap.row.fade-out-right
    .scenario.col-3
      h3 Team Results
      .row
        .filler.col-1
        .filler.col-3
        
  .content-standings.wrap.row.fade-out-right
    .scenario.col-3
      h3 Challenge Standings
      .row
        .filler.col-3
        .filler.col-3
            
          
!
            
              
$orange: #ff8d40;
$purple: #8c5b9e;
$green: #9bd063;
$light-grey: #eaeef1;
$bounce-ease: cubic-bezier(.17, .88, .32, 1.1);

@mixin centerall {
  display: flex;
  align-items: center;
  justify-content: center;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  color: #404b53;  
  font-family: 'proxima-nova-soft', sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
  
  &.font-proxima-soft {
    font-family: 'proxima-nova-soft', sans-serif;
  }
  
  &.font-trade {
    font-family: 'Trade Gothic Next W01', Helvetica, Arial, sans-serif;
  }
}

p > a {
  color: $orange;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  
  &:after {
    content: '';
    background: currentColor;
    border-radius: 2px;
    position: absolute;
    height: 2px;
    bottom: -2px;
    left: 0;
    right: 100%;
    transition: all .4s $bounce-ease;
  }
  
  &:hover {    
    &:after {
      right: 0;
    }
  }
}



// Top Navigation
////////////////////

nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  
  ul {
    background: rgba($green, .98);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
    
  .selected {
    background-color: #7db756;
  }
  
  a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: 1.5rem 1rem;
    display: block;

    &:hover span {
    }
    
    span {
      display: inline-block;
      transition: all .2s ease;
      
      &:hover {
        transform: translateY(-2px);
      }
    }
  }
  
  .logo {
    a {
      letter-spacing: -1px;
      font-weight: bold;
      padding-left: 2rem;
      margin-right: 2rem;
    }
    
    span {
      display: inline-block;
      transform: scale(1.2) !important;
    }
  }
  
  .profile {
    float: right;
    padding-right: 4rem;
    position: relative;
    
    &:hover .photo {
      opacity: 1;
    }
        
    .photo {
      background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/jessica.jpg') no-repeat center;
      background-size: cover;
      padding: 1rem;
      background-color: #fff;
      display: inline-block;
      border-radius: 50%;
      float: right;
      margin-top: -1rem;
      position: absolute;
      right: 2rem;
      top: 50%;
      opacity: .8;
    }
  }
}


// Challenge Header
////////////////////

.challenge-banner {
  background-color: #eaeef1;
  width: 100%;
  padding: 12rem 0 0;
  position: relative;
  text-align: center;
  overflow: hidden;
  
  header {
    color: #fff;
    margin-bottom: 6rem;
    position: relative;
    will-change: transform, opacity;
  }
  
  .challenge-img {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/Layer-9.jpg') no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    animation: fadeIn .4s ease forwards;
    will-change: transform, opacity;
  }
  
  .challenge-title {
    color: #fff;
    font-size: 3rem;
    font-weight: 600;
    margin: 1rem 0 0;
  }
  
  .date-range {
    font-weight: 500;
    opacity: 0;
    animation: fadeInUp .4s 1s ease forwards;
  }
}


.challenge-icon {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/challenge-hexagon-blue.svg') no-repeat center;
  background-size: contain;
  display: inline-block;
  height: 5rem;
  width: 5rem;
  transform: translateY(-50px);
  opacity: 0;
  animation: bounceIn .5s .3s $bounce-ease forwards;
  margin: 0 auto;
  @include centerall;
  
  & + h2 {
    transform: translateY(-50px);
    opacity: 0;
    animation: bounceIn .5s .2s $bounce-ease forwards;
  }
}



// Tabs
////////////////////

.tabs {
  background: rgba(#fff, .9);
  position: relative;
  
  transition: all .4s ease;
  
  .tab {
    cursor: pointer;
    font-weight: 600;
    margin: 0;
    padding: 1.5rem 0;
    position: relative;
    opacity: .8;
    transition: all .2s ease;
    
    &:last-child:before {
      background-color: $orange;
      border-radius: 2px;
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      transition: all .4s $bounce-ease;
    }
    
    > div {
      transition: all .2s ease;
    }
    
    &:hover, &:focus {
      opacity: 1;
      > div {
        color: $orange;
        transform: translateY(-4px);
      }
    }
  }
  
  .selected {
    color: $orange;
    opacity: 1;
    
    &:nth-child(1) {
      &~ :last-child:before {
        transform: translate3d(-200%,0,0);
      }
    }
    
    &:nth-child(2) {
      &~ :last-child:before {
        transform: translate3d(-100%,0,0);
      }
    }
  }
}


section {
  padding: 2rem 0;
  position: relative;
  opacity: 1;
  
  [class^='content-'] {
    transition: all .4s $bounce-ease;
    
    &.fade-out-left,
    &.fade-out-right {
      opacity: 0;
      pointer-events: none;
      //transition-delay: .05s;
    }
    
    &.fade-out-left {
      transform: translate3d(-100px, 0, 0);
    }
    
    &.fade-out-right {
      transform: translate3d(100px, 0, 0);
    }
  }
  
  .content-standings,
  .content-results { 
    position: absolute;
    top: 2rem;
    left: 50%;
    margin-left: -585px;
    border-radius: 6px;
    height: 500px;
    width: 100%;
    padding: 0;
  }
}

.filler {
  background-color: #eaeef1;
  border-radius: 6px;
  height: 200px;
}

.wrap {
  margin: 0 auto;
  padding: 0 2rem;
  max-width: 1170px;
}

@keyframes bookBounce {
  0% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  80% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes shelfLift {
  0% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-4px) rotate(10deg); }
  40% { transform: translateY(-4px) rotate(0); }
  40% { transform: translateY(-4px) rotate(-10deg); }
  80% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

#book-badge:hover {
  
  .shelf {
    animation: shelfLift .4s ease;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
  }
  
  [class*='book-'] {
    animation: bookBounce .4s ease;
    animation-iteration-count: 1;
  }
  
  .book-2 {
    animation-delay: .04s;
  }

  .book-3 {
    animation-delay: .08s;
  }
}

.scenario {
  margin-right: 6rem !important;
  
  h3 {
    font-size: 1.8rem;
  }
}

.resources {
  margin-top: 1.3rem;
  
  & > div {
    background-color: rgba($light-grey, .3);
    border-radius: 6px;
    overflow: hidden;
  }
  
  [class*="col-"] {
    margin-bottom: 0;
  }
  
  .resources-header {
    background-color: $light-grey;
    padding: 1.5rem;
    @include centerall;
  }
  
  .resources-description {
    font-size: 16px;
    opacity: .7;
  }
  
  h3 {
    font-weight: normal;
    margin-bottom: 2.2rem;
    span { font-weight: bold; }
  }
  
  h4 {
    margin-top: 0rem;
  }
  
  .file-list {
    margin: 2rem 1.5rem;
    
    &:first-child {
      margin-top: 1.5rem;
    }
  }
  
  a {
    color: currentColor;
    text-decoration: none;
  }
  
  .file {
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all .2s ease;
    
    &:hover {
      color: $orange;        
      transform: translateX(3px);

      [class^='icon-'] {
        transform: translateX(1px);
      }
    }
  }
  
  .button-cta {
    background-color: $light-grey;
    width: 100%;
    padding: 1.5rem;
    border-radius: 0 0 6px 6px;
  }
  
  button {
    cursor: pointer;
    width: 100%;
  }
}


// Keyframes
////////////////////

@keyframes bounceIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  
  40% {
    transform: translateY(4px);
  }
  
  80% {
    transform: translateY(0);
  }
  
  100% {
    transform: translateY(0);
  }
}


// File Icons
////////////////////

[class^="icon-"] {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/icon-pdf.svg') no-repeat center;
  background-size: contain;
  display: inline-block;
  height: 24px;
  width: 24px;
  margin-right: .5rem;
  transition: all .2s ease;
  vertical-align: top;
  
  &[class$='ppt'] {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/icon-ppt.svg');
  }
  
  &[class$='word'] {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/icon-word.svg');
  }
}

.icon-arrow-down {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/icon-down-arrow.svg');
  height: 10px;
  vertical-align: inherit;
  margin: 0 -1rem 0 .5rem;
}

.icon-calendar {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/icon-calendar.svg');
}


// Flexbox Grid
////////////////////

[class*="col-"] {
  margin-bottom: 20px;
  min-height: 30px;
}

@media all and (min-width: 500px) {
  .row {
    display: flex;
  }

  [class*="col-"] {
    margin-right: 2rem;
  }

  [class*="col-"]:last-child {
    margin-right: 0;
  }

  @for $i from 1 through 12 {
    .col-#{$i}{
      flex: $i;
    }
  }
}

button {
  border-radius: 5px;
  border: none;
  outline: none;
  padding: 1rem 3rem;
  transition: all .2s $bounce-ease;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;

  
  &.primary {
    background-color: $green;
    color: #fff;
    
    &:hover, &:focus {
      background-color: darken($green, 5%);
      
      [class^='icon-'] {
        animation: upDown 1s infinite ease;
      }
    }
    
    &:focus {
      box-shadow: inset 0 0 0 3px darken($green, 10%);
    }

    &:active {
      box-shadow: none;
      background-color: darken($green, 5%);
    }
  }
}


// Font Face
////////////////////

@font-face {
	font-family: TradeGothicSR;
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/TradeGothicNextSRPro-Rg.otf');
}

@font-face {
	font-family: TradeGothicSR;
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68366/TradeGothicNextSRPro-Bd.otf');
	font-weight: bold;
}

            
          
!
            
              console.clear();

var tl = new TimelineMax();

tl.to('.bridge', 0, { 
  drawSVG:"0%"
}).delay(1).staggerTo('.bridge', 1, { 
  drawSVG: "100%"
});



// Tabs
////////////////////

$('.tab').on('click', function() {
  var $this = $(this);
 
  if ($this.hasClass('selected')) {
    return;
  }
  
  var $currentTab = $('.tabs').find('.selected'),
      $content = $('[class^="content-"]'),
      newIndex = $this.index(),
      currentIndex = $currentTab.index();

  // if newly selected tab is before the current tab
  if ($this.index() < $currentTab.index()) {
    $content.eq(currentIndex).addClass('fade-out-right');
    $content.eq(newIndex).removeClass('fade-out-left fade-out-right');
  } else {
    $content.eq(currentIndex).addClass('fade-out-left');
    $content.eq(newIndex).removeClass('fade-out-right fade-out-left');
  }
  
  $currentTab.removeClass('selected');
  $this.addClass('selected');
});


// Font Switching
////////////////////

$(document).keyup(function(evt) {
  if (evt.keyCode == 70) {
    var classes = ['font-proxima-soft','font-trade',''];
    $('body').each(function(){
      this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
    });
  }
});



// Parallax Effect
////////////////////

(function ( $ ) {
  $.fn.parallax = function( options ) {

    var settings = $.extend({
      rate: .5,
      fade: false,
      fadeRate: 1
    }, options);
      
    return this.each(function() {
      var el_pos = 0,
          $el = $(this);
      
      function parallaxAnimateHandler () {
        var window_pos = $(this).scrollTop(), 
            fade_point = settings.fadeRate * $el.parent().height(),
            opacity = (fade_point - window_pos) / fade_point;
            el_pos = (window_pos * settings.rate) + 'px';
        
        var fade = (settings.fade) ? opacity : '';
        
        1 >= opacity && $el.css({ opacity: fade });
        
        $el.css({
          '-webkit-transform': 'translate3d(0, ' + el_pos + ', 0)',
          'transform': 'translate3d(0, ' + el_pos + ', 0)'
        });
      }
      
      $(window).scroll(function() {
        window.requestAnimationFrame(parallaxAnimateHandler)
      });
    });
  };
 
}( jQuery ));

$('.challenge-banner header').parallax({ rate: .2, fade: true, fadeRate: .5 });
$('.challenge-img').parallax({ rate: .6 });
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console