A Pen by seth kontny.

sethkontny

10/16/2014 - 12:15 AM

Wallaby-Canvas.markdown

Rendered
Source

Wallaby Canvas

Yo man keep it simple. All you need is your dear friend transform and some percentages for off canvas navigation.

A Pen by seth kontny on CodePen.

License.

index.html

<link href='//fonts.googleapis.com/css?family=Raleway:400,200,600' rel='stylesheet' type='text/css'>

<header>
  <a class="off-canvas-trigger" href="#">
    <span>S</span><span>E</span><span>T</span><span>H</span><span></span>
    <span> K</span><span>O</span><span>N</span><span>T</span><span>N</span><span>Y</span><span></span>
  </a>
  <nav class="off-canvas">
    <ul class="off-canvas__list">
      <li><a class="off-canvas__link" href="">About</a></li>
      <li><a class="off-canvas__link" href="">Resume</a></li>
      <li><a class="off-canvas__link" href="">Projects</a></li>
      <li><a class="off-canvas__link" href="">Writings</a></li>
      <li><a class="off-canvas__link" href="">Contacts</a></li>
      <li><a class="off-canvas__link" href="">Links</a></li>
      <li><a class="off-canvas__link" href="">Other Links</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h1>Persona Vox</h1>
  </section>
  <h1>SleepMedx Inc.</h1>
  </section>
  <h1>Solo collab</h1>
</main>
<footer>
</footer>

script.js

$('.off-canvas-trigger').click(function() {
  $('body').toggleClass('off-canvas-active');
});

style.scss


// =================================================
// Modernizr
// =================================================

// Modernizr mixin to create .modernizr selector
// http://codepen.io/sturobson/pen/xcdha

@mixin css($property, $support: true) {
    @if $support == true {
        .#{$property} & {
            @content;
        }
    }
    @else {
        .no-#{$property} & {
            @content;
        }
    }
}

/*----------------------------------------------
	=Variables
----------------------------------------------*/
$accent: #ff6589;
$background: #013742;

// Would this look better if all the transitions had the same speed?
$shared-transition-speed: .6s;

// wave
// x
$trigger-active-style: wave;

// static - no extra styles applied
// traditional
// scale

// Future additions
//   - push + rotate
//   - fade
$content-push: scale;

/*----------------------------------------------
	=Resets
----------------------------------------------*/
*,
*:before,
*:after {
  	box-sizing: border-box;
  	position: relative;
	}
*:before,
*:after { pointer-events: none; }

html { 
  height: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: left;
  background: $background;
  }
  body { 
    height: 100%;
    min-height: 100%;
    margin: 0;
    color: #fff;
  }

/*----------------------------------------------
	=HTML
----------------------------------------------*/
a {
  text-decoration: none;
  transition: .3s;
}

/*----------------------------------------------
	=Headings
----------------------------------------------*/
h1 { 
  font-size: 7vw;
  font-weight: 200;
  letter-spacing: 0;
  text-align: center;
  color: #ff6589;
  transform-origin: right top;
  &:first-letter {
    font-size: 9vw;
  }
}

/*----------------------------------------------
	=Off Canvas Trigger
----------------------------------------------*/
.off-canvas-trigger {
  display: block;
  padding: 1.75em 1em 1.75em 5em;
  font-size: 1.75em;
  background: rgba(#fff, .05);
  color: #fff;
  transition: .3s;
  &:before {
    position: absolute;
    top: 22%;
    left: 1em;
    height: .5em;
    width: .5em;
    content: '';
    background: $accent;
    box-shadow: 
      .5em 0 0 0 adjust-hue($accent, 20%),
      1em 0 0 0 adjust-hue($accent, 40%),
      1.5em 0 0 0 adjust-hue($accent, 60%),
      2em 0 0 0 adjust-hue($accent, 80%),
      2.5em 0 0 0 adjust-hue($accent, 100%),
   
      0 1em 0 0 adjust-hue($accent, 0),
      .5em 1em 0 0 adjust-hue($accent, 20%),
      1em 1em 0 0 adjust-hue($accent, 40%),
      1.5em 1em 0 0 adjust-hue($accent, 60%),
      2em 1em 0 0 adjust-hue($accent, 80%),
      2.5em 1em 0 0 adjust-hue($accent, 100%),
      
      0 2em 0 0 adjust-hue($accent, 0),
      .5em 2em 0 0 adjust-hue($accent, 20%),
      1em 2em 0 0 adjust-hue($accent, 40%),
      1.5em 2em 0 0 adjust-hue($accent, 60%),
      2em 2em 0 0 adjust-hue($accent, 80%),
      2.5em 2em 0 0 adjust-hue($accent, 100%);
    transition: .45s;
  }
  &:hover {
    background: rgba(#fff, .1);
    &:before {
      background: adjust-hue($accent, 100%);
      box-shadow: 
      .5em 0 0 0 adjust-hue($accent, 80%),
      1em 0 0 0 adjust-hue($accent, 60%),
      1.5em 0 0 0 adjust-hue($accent, 40%),
      2em 0 0 0 adjust-hue($accent, 20%),
      2.5em 0 0 0 adjust-hue($accent, 0),
   
      0 1em 0 0 adjust-hue($accent, 100%),
      .5em 1em 0 0 adjust-hue($accent, 80%),
      1em 1em 0 0 adjust-hue($accent, 60%),
      1.5em 1em 0 0 adjust-hue($accent, 40%),
      2em 1em 0 0 adjust-hue($accent, 20%),
      2.5em 1em 0 0 adjust-hue($accent, 0),
      
      0 2em 0 0 adjust-hue($accent, 100%),
      .5em 2em 0 0 adjust-hue($accent, 80%),
      1em 2em 0 0 adjust-hue($accent, 60%),
      1.5em 2em 0 0 adjust-hue($accent, 40%),
      2em 2em 0 0 adjust-hue($accent, 20%),
      2.5em 2em 0 0 adjust-hue($accent, 0);
    }
  }
  .off-canvas-active & {
    background: rgba(#fff, .1);
    &:before {
      background: $accent;
      @if $trigger-active-style == wave {
        box-shadow: 
          .5em .5em 0 0 adjust-hue($accent, 20%),
          1em 1em 0 0 adjust-hue($accent, 40%),
          1.5em .5em 0 0 adjust-hue($accent, 60%),
          2em 0 0 0 adjust-hue($accent, 80%),
          2.5em .5em 0 0 adjust-hue($accent, 100%),

          0 1em 0 0 adjust-hue($accent, 0),
          .5em 1.5em 0 0 adjust-hue($accent, 20%),
          1em 2em 0 0 adjust-hue($accent, 40%),
          1.5em 1.5em 0 0 adjust-hue($accent, 60%),
          2em 1em 0 0 adjust-hue($accent, 80%),
          2.5em 1.5em 0 0 adjust-hue($accent, 100%),

          0 2em 0 0 transparent,
          .5em 2em 0 0 transparent,
          1em 2em 0 0 transparent,
          1.5em 2em 0 0 transparent,
          2em 2em 0 0 transparent,
          2.5em 2em 0 0 transparent;
      }
      @if $trigger-active-style == x {
        box-shadow: 
          .5em .5em 0 0 adjust-hue($accent, 20%),
          1em 1em 0 0 adjust-hue($accent, 40%),
          1.5em .5em 0 0 adjust-hue($accent, 60%),
          2em 0 0 0 adjust-hue($accent, 80%),
          2.5em .5em 0 0 transparent,

          0 2em 0 0 adjust-hue($accent, 0),
          .5em 1.5em 0 0 adjust-hue($accent, 20%),
          1em 2em 0 0 transparent,
          1.5em 1.5em 0 0 adjust-hue($accent, 60%),
          2em 2em 0 0 adjust-hue($accent, 80%),
          2.5em 1.5em 0 0 transparent,

          0 2em 0 0 transparent,
          .5em 2em 0 0 transparent,
          1em 2em 0 0 transparent,
          1.5em 2em 0 0 transparent,
          2em 2em 0 0 transparent,
          2.5em 2em 0 0 transparent;
      }
    }
  }
    span {
      color: $accent;
      &:nth-child(2) { color: adjust-hue($accent, 20%); }
      &:nth-child(3) { color: adjust-hue($accent, 40%); }
      &:nth-child(4) { color: adjust-hue($accent, 60%); }
      &:nth-child(5) { color: adjust-hue($accent, 80%); }
      &:nth-child(6) { color: adjust-hue($accent, 100%); }
      &:nth-child(7) { color: adjust-hue($accent, 120%); }
    }
}

/*----------------------------------------------
	=Off Canvas
----------------------------------------------*/
.off-canvas {
  position: fixed;
  top: 8.25em;
  z-index: 2;
  height: 100%;
  min-height: 100%;
  // Reinvestigate - Mobile Safari doesn't render the scroll bar here
  // If the content is very tall consider condensing via height based media queries
  overflow-y: scroll;
  overflow-scrolling: touch;
  // A little pushin for the cushion
  // Does the scroll work as expected without padding-bottom?
  padding: .75em 0 20em;
  width: 75%;
  background: rgba(#fff, .02);
  transition: .6s;
  
  @media (min-width: 37.5em) {
    width: 50%;
  }
  
  @include css(csstransforms3d) {
    transform: translate3d(-100%, 0, 0);
  }
  @include css(csstransforms3d, false) {
    transform: translate(-100%);
  }
  @include css(csstransforms, false) {
    left: -100%;
  }
  
  .off-canvas-active & {
    @include css(csstransforms3d) {
      transform: translate3d(0, 0, 0);
    }
    @include css(csstransforms3d, false) {
      transform: translate(0);
    }
    @include css(csstransforms, false) {
      left: 0;
    }
  }
}
  .off-canvas__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
    .off-canvas__link {
      display: block;
      z-index: 2;
      padding: 2em;
      letter-spacing: 0;
      color: $accent;
      &:first-letter { 
        font-size: 2em; 
      }
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        content: '';
        transition: .3s;
      }
      &:hover {
        letter-spacing: .2em;
        color: adjust-hue($accent, 30%);
        &:before {
          box-shadow: 
            inset .3em 0 0 0 $accent,
          		  inset .6em 0 0 0 $background,
            inset .7em 0 0 0 adjust-hue($accent, 20%);
        }
      }
    }

/*----------------------------------------------
	=Main
----------------------------------------------*/
main { 
  overflow: hidden;
}
  section {
    transition: .6s;
    @if $content-push == traditional {
      .off-canvas-active & {
        @include css(csstransforms3d) {
          transform: translate3d(50%, 0, 0);
        }
        @include css(csstransforms3d, false) {
          transform: translate(50%);
        }
        @include css(csstransforms, false) {
          left: 50%;
        }
      }
    }
    @if $content-push == scale {
      transform-origin: right center;
      .off-canvas-active & {
        @include css(csstransforms) {
          transform: scale(.9);
        }
        @include css(csstransforms, false) {
          opacity: .8;
        }
      }
    }
  }

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

A Pen by seth kontny.

Wallaby Canvas