octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="demo">
  <div class="demo__top">
    <svg class="demo__top-svgBg" viewBox="0 0 366 256">
      <g class="svgBg__objects">
        <path class="svgBg__bg svgBg__bg1" fill="#86D7DB" d="M0,143 88,107 224,153 348,109 366,123 366,256 0,256z" />
        <path class="svgBg__bg svgBg__bg2" fill="#3C929A" d="M0,156 106,136 272,172 342,124 366,144 366,256 0,256z" />
        <path class="svgBg__bg svgBg__bg3" fill="#416175" d="M0,170 62,160 235,148 305,145 366,153 366,256 0,256z" />
        <g class="svgBg__tree svgBg__tree-1 m--left" data-id="1">
          <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M54,127 C77,127 62,95 54,63 C46,95 31,127 54,127" />
          <path class="svgBg__tree-trunk svgBg__tree-part" d="M56,147 Q55,115 54,83 Q53,115 52,146" />
        </g>
        <g class="svgBg__tree svgBg__tree-2 m--left" data-id="2">
          <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M67,124 C90,124 75,92 67,59 C59,92 44,124 67,124" />
          <path class="svgBg__tree-trunk svgBg__tree-part" d="M69,144 Q68,112 67,80 Q66,112 65,143" />
        </g>
        <g class="svgBg__tree svgBg__tree-3 m--right" data-id="3">
          <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M264,129 C287,129 272,97 264,64 C256,97 241,129 264,129" />
          <path class="svgBg__tree-trunk svgBg__tree-part" d="M266,149 Q265,117 264,85 Q263,117 262,148" />
        </g>
        <g class="svgBg__tree svgBg__tree-4 m--right" data-id="4">
          <path class="svgBg__tree-leafs svgBg__tree-part" fill="#207277" d="M287,128 C310,128 295,96 287,63 C279,96 264,128 287,128" />
          <path class="svgBg__tree-trunk svgBg__tree-part" d="M289,148 Q288,116 287,84 Q286,116 285,147" />
        </g>
        <g class="svgBg__tree svgBg__tree-5 m--right" data-id="5">
          <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M313,128 C336,128 321,96 313,63 C305,96 290,128 313,128" />
          <path class="svgBg__tree-trunk svgBg__tree-part" d="M315,148 Q314,116 313,84 Q312,116 311,147" />
        </g>
      </g>
    </svg>
  </div>
  <div class="demo__body">
    <div class="plane-cont">
      <div class="plane-rotater">
        <div class="plane">
          <svg class="plane-svg" viewBox="0 0 28 26">
            <path class="plane-svg__path" fill="#fff" d="M0,0 28,13 0,26 0,13 20,13 0,7z" />
          </svg>
        </div>
      </div>
    </div>
    <div class="pull-down">Pull down</div>
    <div class="items">
      <div class="item item-3">
        <a href="https://twitter.com/NikolayTalanov" target="_blank" class="icon-box item__icon">
          <span class="icon-box__inner m--left">
            <i class="fa fa-twitter"></i>
          </span>
          <span class="icon-box__inner m--right">
            <i class="fa fa-twitter"></i>
          </span>
        </a>
        <a href="https://twitter.com/NikolayTalanov" target="_blank" class="item__name">My Twitter</a>
      </div>
      <div class="item item-2">
        <a href="http://codepen.io/suez/public/" target="_blank" class="icon-box item__icon">
          <span class="icon-box__inner m--left">
            <i class="fa fa-codepen"></i>
          </span>
          <span class="icon-box__inner m--right">
            <i class="fa fa-codepen"></i>
          </span>
        </a>
        <a href="http://codepen.io/suez/public/" target="_blank" class="item__name">My other demos</a>
      </div>
      <div class="item item-1">
        <div class="item__icon m--img">
          <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-80_5.jpg" />
        </div>
        <span class="item__name">Feed the cat!</span>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              *, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  font-size: 62.5%;
  
  @media (max-width: 768px) {
    font-size: 50%;
  }
}
body {
  background: #EDEFF2;
}

$demoW: 36.6rem;
$demoH: 47rem;
$topH: 18.6rem;
$topMaxH: 25.6rem;
$bodyH: $demoH - $topH;
$planeAnimTime: 3.5s;

.demo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: $demoW/-2;
  margin-top: $demoH/-2;
  width: $demoW;
  height: $demoH;
  background: #FFFFFF;
  border-radius: 1.2rem;
  box-shadow: 0 2rem 2rem rgba(0,0,0,0.15);
  overflow: hidden;
  
  &__top {
    position: relative;
    height: $topH;
    background: linear-gradient(#7BCECA, #82D3CB);
    overflow: hidden;
  }
  
  &__body {
    position: relative;
    min-height: $bodyH*2;
    padding-top: 5rem;
    will-change: transform;
  }
}

.pull-down {
  position: absolute;
  left: 0;
  top: 1rem;
  width: 100%;
  font-size: 2rem;
  text-align: center;
  color: rgba(#545C67, 0.6);
  user-select: none;
  pointer-events: none;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgba(#545C67, 0.6);
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    animation: arrowAnim 1.5s infinite;
  }
  
  &:before {
    left: 11rem;
  }
  &:after {
    left: 25rem;
  }
}

@keyframes arrowAnim {
  to {
    transform: translateY(1.3rem) rotate(45deg);
    opacity: 0;
  }
}

.items {
  position: relative;
  
  &.padded {
    transition: padding 0.3s;
    padding-top: 8rem;
  }
}

.item {
  height: 8rem;
  padding: 2rem 2.5rem;
  user-select: none;
  transition: opacity 0.3s;
  
  &.absPos {
    position: absolute;
    left: 0;
    top: 0;
  }
  
  &.hidden {
    opacity: 0;
  }
  
  &__icon {
    display: inline-block;
    vertical-align: top;
    width: 4rem;
    height: 4rem;
    margin-right: 2rem;
    border-radius: 50%;
    
    &.animated {
      animation: animateIcon 0.6s forwards;
    }
    
    &.m--img {
      
      img {
        width: 100%;
      }
    }
  }
  
  &__name {
    font-size: 2rem;
    line-height: 4rem;
    color: #545C67;
  }
}

@keyframes animateIcon {
  20% {
    transform: scaleY(0.7);
  }
  40% {
    transform: scaleY(0.9);
  }
  60% {
    transform: scaleY(0.6);
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}

.plane-cont {
  position: absolute;
  left: 1.7rem;
  top: -2.8rem;
  width: 5.6rem;
  height: 5.6rem;
  background: #5DB2DF;
  border-radius: 50%;
  box-shadow: 0 0.3rem 0.3rem rgba(0,0,0,0.3);
}

.plane-rotater {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1rem;
  margin-top: -1.3rem;
  width: 2.8rem;
  height: 2.6rem;
}

.plane {
  
  &.fly {
    animation: planeFly $planeAnimTime forwards;
  }
}

@keyframes planeFly {
  28% {
    transform: translate(55rem, 13rem) rotate(20deg) scale(0.7);
  }
  35% {
    transform: translate(45rem, -8rem) rotate(-160deg) scale(0.5);
  }
  85% {
    transform: translate(-15rem, -4rem) rotate(-180deg) scale(0.7);
  }
  90% {
    transform: translate(-15rem, 0) rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.svgBg {
  
  &__bg {
    transform-origin: 183px 256px;
  }
  
  &__tree {
    
    &-trunk {
      fill: #1E5E65;
    }
    
    &-part {
      transform-origin: inherit;
    }
    
    &-1 {
      transform-origin: 54px 147px;
      opacity: 0.7;
      
      .svgBg__tree-part {
        transform: scale(0.35, 0.44);
      }
    }
    
    &-2 {
      transform-origin: 67px 144px;
      opacity: 0.7;
      
      .svgBg__tree-part {
        transform: scale(0.56, 0.65);
      }
    }
    
    &-3 {
      transform-origin: 264px 149px;
      
      .svgBg__tree-part {
        transform: scale(0.58, 0.65);
      }
    }
    
    &-4 {
      transform-origin: 287px 148px;
      
      .svgBg__tree-part {
        transform: scale(0.8, 1);
      }
    }
    
    &-5 {
      transform-origin: 313px 148px;
      
      .svgBg__tree-part {
        transform: scale(0.5, 0.61);
      }
    }
  }
}

/*
font awesome icon slicing effect from http://codepen.io/suez/pen/KpwEeg
*/
$boxSize: 4rem;
$fontSize: $boxSize * 0.6;
$xDiff: $boxSize / 20;
$yDiff: $boxSize / 10;
$animTime: 0.5s;
// change this if you need another angle (now works between 0 and 45 deg)
$deg: 30deg;
$degCoef: $deg / 45deg;
$sliceLeft: (1 - $degCoef) / 2 * 100%;
$sliceX: $xDiff + (1 - $degCoef) / 2 * $xDiff + 0.1rem;
.icon-box {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: $boxSize;
  height: $boxSize;
  background: #0c0c0c;
  overflow: hidden;
  font-size: 0;
  text-decoration: none;
  border-radius: 50%;
  
  &:before {
    content: "";
    position: absolute;
    left: $sliceLeft;
    top: 0;
    margin-left: -1px;
    width: 2px;
    height: 0.6rem;
    background: #fff;
    transition: transform $animTime;
    transform: rotate($deg * -1) translate($sliceX, -1rem);
  }
  
  &:hover:before {
    animation: slice $animTime;
  }
  
  &__inner {
    position: relative;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    width: 50%;
    height: 100%;
    transform: rotate($deg * -1);
    font-size: $fontSize;
    color: #fff;
    
    .fa {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%) rotate($deg);
    }
    
    &.m--left {
      transform-origin: 100% 50%;

      .fa {
        left: 100%;
      }
    }

    &.m--right {
      transform-origin: 0 50%;
      transition: transform $animTime;
      
      .icon-box:hover & {
        transition: transform $animTime $animTime*0.2;
        transform: rotate($deg * -1) translate($xDiff, $yDiff);
      }

      .fa {
        left: 0;
      }
    }
  }
}

@keyframes slice {
  to {
    transform: rotate(-$deg) translate($sliceX, $boxSize*1.5 + 1rem);
  }
}
            
          
!
            
              'use strict';

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();

$(document).ready(function() {

  var $top = $(".demo__top");
  var $body = $(".demo__body");
  var $bg1 = $(".svgBg__bg1");
  var $bg2 = $(".svgBg__bg2");
  var $bg3 = $(".svgBg__bg3");
  // jQuery have problems with getting svg elements attrs, so I'm using vanillaJS
  var $trees = [].slice.call(document.querySelectorAll(".svgBg__tree"));
  var $treeParts = [].slice.call(document.querySelectorAll(".svgBg__tree-part"));
  var $leftTrees = $(".svgBg__tree.m--left");
  var $rightTrees = $(".svgBg__tree.m--right");
  var $planeRotater = $(".plane-rotater");
  var $plane = $(".plane");
  var isDesktop = window.matchMedia("(min-width: 769px)").matches;
  var topH = (isDesktop) ? 186 : 149;
  var bg1change, bg2change, bg3change;
  var bg1max = (isDesktop) ? 10 : 8;
  var bg2max = (isDesktop) ? 22 : 18;
  var bg3max = (isDesktop) ? 44 : 35;
  var pullDeltaY;
  var maxPullDeltaY = (isDesktop) ? 70 : 56;
  var treesData = {};
  var treeMaxX = (isDesktop) ? 18 : 14;
  var treeMaxCoef = treeMaxX / maxPullDeltaY;
  var treeChange;
  var planeMaxDeg = -45; // defines maximum plane rotation deg during pull event
  var planeMaxCoef = planeMaxDeg / maxPullDeltaY;
  var planeChange;
  var frame = 1000 / 60; // 60 frames per second
  // duration for release animation for all elements, except flying plane
  var releaseTime = 900;
  var animating = false;
  var planeAnimTime = 3500; // this value must be synced with SASS $planeAnimTime
  
  /* You can find these easing functions on this site
  http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm
  Also, you can customize them with generator,
  like i customized this elasticBig easing, to heavily shake these trees
  */
  var easings = {
    elastic: function(t,b,c,d) {
      var ts = (t/=d)*t;
      var tc = ts*t;
      return b+c*(33*tc*ts + -106*ts*ts + 126*tc + -67*ts + 15*t);
    },
    elasticBig: function(t,b,c,d) {
      var ts = (t/=d)*t;
      var tc = ts*t;
      return b+c*(21*tc*ts + -150*ts*ts + 250*tc + -150*ts + 30*t);
    },
    inCubic: function(t,b,c,d) {
      var tc = (t/=d)*t*t;
      return b+c*(tc);
    }
  };
  
  /* store clones in object */
  var cloneCounter = 1;
  var $items = $(".items");
  var clones = {
    clone1: $(".item-1").clone(),
    clone2: $(".item-2").clone(),
    clone3: $(".item-3").clone()
  };
  
  /* Applies class with padding transition, which shifts content down,
  then it's prepends clone with 0 opacity and absolute position (0,0).
  Then this clone fades in and padding class being removed from $items and
  absolute position removed from inserted clone
  */
  function insertNewClone() {
    var $clone = clones["clone"+cloneCounter];
    $clone.addClass("absPos hidden");
    $items.prepend($clone).addClass("padded");
    $clone.css("top");
    $clone.removeClass("hidden");
    $clone.find(".item__icon").addClass("animated");
    cloneCounter++;
    if (cloneCounter > 3) cloneCounter = 1;
    setTimeout(function() {
      $items.removeClass("padded");
      $clone.removeClass("absPos");
    }, 300);
  };
  
  /* This looks messy, but basically I'm storing tree parts paths D attributes as arrays
  and X&Y coordinates of middle points.
  */
  function storeTreeCoords() {
    var treeId, treeObj, trunkTop, leafsTop;
    
    $trees.forEach(function($tree) {
      treeId = $tree.getAttribute("data-id");
      treesData["tree"+treeId] = {};
      treeObj = treesData["tree"+treeId];
      treeObj.isRight = $tree.classList.contains("m--right");
      treeObj.$treeTrunk = $tree.querySelector(".svgBg__tree-trunk");
      treeObj.$treeLeafs = $tree.querySelector(".svgBg__tree-leafs");
      treeObj.trunkInitArrD = treeObj.$treeTrunk.getAttribute("d").split(" ");
      treeObj.leafsInitArrD = treeObj.$treeLeafs.getAttribute("d").split(" ");
      trunkTop = treeObj.trunkInitArrD[2];
      leafsTop = treeObj.leafsInitArrD[3];
      treeObj.trunkInitX = +trunkTop.split(",")[0];
      treeObj.leafsInitX = +leafsTop.split(",")[0];
      treeObj.trunkInitY = +trunkTop.split(",")[1];
      treeObj.leafsInitY = +leafsTop.split(",")[1];
    });
  };
  
  storeTreeCoords();
  
  /* Each tree consists of two parts - trunk and leafs. 
  Both of these parts created with two quadratic bezier curves (left and right sides).
  Trunk created with C curve, leafs with Q curve. Here you can find good explanation about them:
  http://tutorials.jenkov.com/svg/path-element.html
  Basically, I'm just changing middle point X coordinate of each part
  and it's affects both curves, so this looks like I'm magically tilt these trees
  */
  function tiltTrees(x) {
    var treeId, treeObj, trunkArr, leafsArr, changeX;

    $trees.forEach(function($tree) {
      treeId = $tree.getAttribute("data-id");
      treeObj = treesData["tree"+treeId];
      trunkArr = treeObj.trunkInitArrD.slice();
      leafsArr = treeObj.leafsInitArrD.slice();
      changeX = (treeObj.isRight) ? x : -x;
      
      trunkArr[2] = (treeObj.trunkInitX + changeX/2) + "," + treeObj.trunkInitY;
      leafsArr[3] = (treeObj.leafsInitX + changeX) + "," + treeObj.leafsInitY;

      treeObj.$treeTrunk.setAttribute("d", trunkArr.join(" "));
      treeObj.$treeLeafs.setAttribute("d", leafsArr.join(" "));
    });
  };
  
  /* Moving mountains and tree <g> elements with transform translateY
  transform-origin's hardcoded for each element in css and scales with viewBox
  */
  function moveBgs() {
    $bg1.css({"-webkit-transform": "translate3d(0,"+bg1change+"px, 0)",
              "transform": "translate3d(0,"+bg1change+"px, 0)"});
    $bg2.css({"-webkit-transform": "translate3d(0,"+bg2change+"px, 0)",
              "transform": "translate3d(0,"+bg2change+"px, 0)"});
    $bg3.css({"-webkit-transform": "translate3d(0,"+bg3change+"px, 0)",
              "transform": "translate3d(0,"+bg3change+"px, 0)"});
    $leftTrees.css({"-webkit-transform": "translate3d(0,"+bg2change+"px, 0)",
                    "transform": "translate3d(0,"+bg2change+"px, 0)"});
    $rightTrees.css({"-webkit-transform": "translate3d(0,"+bg3change+"px, 0)",
                     "transform": "translate3d(0,"+bg3change+"px, 0)"});
  };
  
  function checkMaxBgValues() {
    if (bg1change > bg1max) bg1change = bg1max;
    if (bg2change > bg2max) bg2change = bg2max;
    if (bg3change > bg3max) bg3change = bg3max;
  };
  
  // applies changes for all elements
  function applyChanges(topY) {
    $top.css("height", topH + topY + "px");
    moveBgs();
    tiltTrees(treeChange);
    $planeRotater.css({"-webkit-transform": "rotate("+planeChange+"deg)",
                       "transform": "rotate("+planeChange+"deg)"});
  };
  
  /* calculates numbers for applyChanges function, when
  you are using mousemove/touchmove pull event
  */
  function pullChange(y) {
    if (y < 0) y = 0;
    if (y > maxPullDeltaY) y = maxPullDeltaY;
    bg1change = bg2change = bg3change = y;
    checkMaxBgValues();
    treeChange = y * treeMaxCoef;
    planeChange = y * planeMaxCoef;
    
    applyChanges(y);
  };
  
  /* calculates numbers for applyChanges function, when
  release event is fired
  */
  function releaseChange(props) {
    bg1change = bg2change = bg3change = props.bgY;
    checkMaxBgValues();
    treeChange = props.treeVal * treeMaxCoef;
    planeChange = props.planeDeg * planeMaxCoef;
    
    applyChanges(props.topY);
  };
  
  function release() {
    // number of frames, which you need to animate with requestAnimationFrame
    var steps = Math.floor(releaseTime / frame);
    var curStep = 0;
    var topY, bgY, treeVal, planeDeg;
    var y = pullDeltaY;
    if (y > maxPullDeltaY) y = maxPullDeltaY;
    var releasePlane = y >= maxPullDeltaY/2;
    animating = true; // prevents from pull event during animation
    // if you pulled more than 1/2 of maxPullDeltaY - starts the plane flight animation
    if (releasePlane) {
      $plane.addClass("fly"); // adds class to plane with keyframes animation
      setTimeout(function() {
        // when animation is over, allow pull events, remove keyframes class and add new clone
        animating = false;
        $plane.removeClass("fly");
        insertNewClone();
      }, planeAnimTime);
    }
    
    /* this function fires each available frame,
    until animation will be over (curStep > steps)
    */
    function animate() {
      curStep++;
      // applies different easings for different groups of elements
      topY = easings.elastic(curStep, y, 0 - y, steps);
      bgY = easings.elastic(curStep, y, 0 - y, steps);
      treeVal = easings.elasticBig(curStep, y, 0 - y, steps);
      planeDeg = easings.inCubic(curStep, y, 0 - y, steps);
      
      releaseChange({topY: topY, bgY: bgY, treeVal: treeVal, planeDeg: planeDeg});
      
      if (curStep > steps) {
        pullDeltaY = 0;
        // if pulled less than 1/2 of maxPullDeltaY - allow pull event earlier
        if (!releasePlane) animating = false;
        return;
      }
      requestAnimFrame(animate);
    }
    animate();
  };
  
  /* On mousedown/touchstart, attaches mousemove/touchmove events
  for dynamic pull change events. When mouseup/touchend event fired -
  runs release function and removes move/end events
  */
  $(document).on("mousedown touchstart", ".demo__body", function(e) {
    if (animating) return; // prevents from pulling during the release animation
    var startY =  e.pageY || e.originalEvent.touches[0].pageY;
    
    $(document).on("mousemove touchmove", function(e) {
      var y = e.pageY || e.originalEvent.touches[0].pageY;
      pullDeltaY = (y - startY) / 1.5; // slightly slow pull event for better experience
      if (!pullDeltaY) return; // prevents from rapid click events
      pullChange(pullDeltaY);
    });

    $(document).on("mouseup touchend", function() {
      $(document).off("mousemove touchmove mouseup touchend");
      if (!pullDeltaY) return; // prevents from rapid click events
      release();
    });
  });
  
  // source - http://davidwalsh.name/javascript-debounce-function
  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };
  
  /* redifine max values for desktop/mobile
  all other things scales with rem units and viewBox
  */
  var resizeFn = debounce(function() {
    isDesktop = window.matchMedia("(min-width: 769px)").matches;
    topH = (isDesktop) ? 186 : 149;
    bg1max = (isDesktop) ? 10 : 8;
    bg2max = (isDesktop) ? 22 : 18;
    bg3max = (isDesktop) ? 44 : 35;
    maxPullDeltaY = (isDesktop) ? 70 : 56;
    treeMaxX = (isDesktop) ? 18 : 14;
  }, 100);
  
  $(window).on("resize", resizeFn);
  

});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console