jQuery addClass example

Change class name on click in jQuery

by 20yco

HTML

<div class="cont">

<svg viewBox="0 0 1327.78 2952.52" preserveAspectRatio="none">
			<path class="c-line c-line--fill c-line--fill-1" d="M.11.49s415.15,96,291.15,576-132,896,340,1284,732,472,692,1092" vector-effect="non-scaling-stroke"></path>
			<path class="c-line c-line--fill c-line--fill-2 js-line--fill" d="M.11.49s415.15,96,291.15,576-132,896,340,1284,732,472,692,1092" vector-effect="non-scaling-stroke" style="stroke-dashoffset: 1800; stroke-dasharray: 1879.02px, 1889.02px;"></path>
			<path class="c-line c-line--dashed" d="M.11.49s415.15,96,291.15,576-132,896,340,1284,732,472,692,1092" vector-effect="non-scaling-stroke"></path>
		</svg>
</div>

CSS

body {
  background: #000; 
  height:1000px;
}

.c-line-wrap {
    position: absolute;
}

.c-line-wrap svg {
    height: 100%;
    width: 100%;
}

.c-line {
    fill: none;
    stroke-miterlimit: 10;
}

.c-line--fill-1 {
    stroke: #404150;
}

.c-line--fill-2 {
    stroke: #fff;
}

.c-line--dashed {
    stroke: #131424;
    stroke-dasharray: 5 5;
    stroke-width: 4;
}

JavaScript

var lastScrollTop = 0;

$(document).on('scroll', function(e){

  var d = d || parseInt($('.c-line.c-line--fill-2').css('stroke-dashoffset'));
  
  
       st = $(this).scrollTop();
        if(st < lastScrollTop) {
            if( d <= 1800){
              d += $(this).scrollTop() / 20;
            }
        }
        else {
          if( d >= 0){
            d -= $(this).scrollTop() / 20;
          }
        }
        lastScrollTop = st;
     

$('.c-line.c-line--fill-2').css('stroke-dashoffset', d );
  
});