LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

SCROLL TO DRAW IRONMAN SVG

CSS
body {
  font-family: avenir, helvetica, sans-serif;
  background: skyblue;
  color: white;
}

h1 {
  text-align: center;
  padding-bottom: 50px;
  font-size: 2.4em;
  font-weight: 200;
  letter-spacing: .07em;
}

svg {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-width: 480px;
  max-height: 340px;
}

.path {
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
}

.frame {
  height: 3000px;
}
JS
$(document).ready(function() {
  //variable for the 'stroke-dashoffset' unit
  var $dashOffset = $(".path").css("stroke-dashoffset");
  //on a scroll event - execute function
  $(window).scroll(function() {
    //calculate how far down the page the user is 
    var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
    //convert dashoffset pixel value to interger
    var $newUnit = parseInt($dashOffset, 10);
    //get the value to be subtracted from the 'stroke-dashoffset'
    var $offsetUnit = $percentageComplete * ($newUnit / 100);
    //set the new value of the dashoffset to create the drawing effect
    $(".path").css("stroke-dashoffset", $newUnit - $offsetUnit);
  });
});
Term
Mon, 11/27/2017 - 21:28

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv