Javascript 在滚动页面的特定百分比上开始和结束

Question

我正在寻求帮助。

我已将此 codepen 应用于我的页面 - http://codepen.io/chriscoyier/pen/YXgWam ，但我想从某个百分比(比如说页面的 60%)开始绘制，并且它/已经绘制了 100% 的 svg 文件)在滚动的另一个百分比(比如说页面的 80%)

// Get a reference to the <path>
var path = document.querySelector('#path');
var path2 = document.querySelector('#path2');
var path3 = document.querySelector('#path3');
// Get length of path...
var pathLength = path.getTotalLength();
var path2Length = path2.getTotalLength();
var path3Length = path3.getTotalLength();
// Will make very long dashes (the length of the paths itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;
path2.style.strokeDasharray = path2Length + ' ' + path2Length;
path3.style.strokeDasharray = path3Length + ' ' + path3Length;
// Set offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;;
path2.style.strokeDashoffset = path2Length;
path3.style.strokeDashoffset = path3Length;
// Because Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();
path2.getBoundingClientRect();
path3.getBoundingClientRect();
// When the page scrolls...
window.addEventListener("scroll", function(e) {
  // What % down is it? 
  // https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
var scrollPercentage = (document.documentElement.scrollTop
document.body.scrollTop) / (document.documentElement.scrollHeight
document.documentElement.clientHeight - 0.5);
}
  // Length to offset the dashes
if {
var drawLength = pathLength * scrollPercentage;
var drawLength2 = path2Length * scrollPercentage;
var drawLength3 = path3Length * scrollPercentage;
}
  // Draw logo in reverse
  path.style.strokeDashoffset = pathLength - drawLength;
path2.style.strokeDashoffset = path2Length - drawLength2;
path3.style.strokeDashoffset = path3Length - drawLength3;
// When complete, remove the dash array, otherwise shapes aren't quite sharp
// Accounts for fuzzy math
if (scrollPercentage >= 0.99) {
path.style.strokeDasharray = "none";
} else {
path.style.strokeDasharray = pathLength + ' ' + pathLength;
}
  if (scrollPercentage >= 0.99) {
path2.style.strokeDasharray = "none";
  } else {
path2.style.strokeDasharray = path2Length + ' ' + path2Length;
  }
  if (scrollPercentage >= 0.99) {
path3.style.strokeDasharray = "none";
  } else {
path3.style.strokeDasharray = path3Length + ' ' + path3Length;
  }
  // Add  fill to the paths
  if (scrollPercentage > 0.99) {
path.setAttribute("fill", "#672A7A");
  } else {
path.setAttribute("fill", "none");
  }
  if (scrollPercentage > 0.99) {
path2.setAttribute("fill", "#672A7A");
  } else {
path2.setAttribute("fill", "none");
  }
  } else {
path.style.strokeDasharray = pathLength + ' ' + pathLength;
  }
  if (scrollPercentage >= 0.99) {
path2.style.strokeDasharray = "none";
} else {
path2.style.strokeDasharray = path2Length + ' ' + path2Length;
  }
  if (scrollPercentage >= 0.99) {
path3.style.strokeDasharray = "none";
  } else {
path3.style.strokeDasharray = path3Length + ' ' + path3Length;
 }

谢谢你，马丁

Answer 1

这只是适当设置drawLength的情况。

• 如果它低于 0.6 (60%)，您希望它为 0，
• 如果它高于 0.8，您希望它成为路径长度
• 它需要在 0 和路径长度之间线性变化。

东西like this ...

  var drawLength = 0;
  if (scrollPercentage >= 0.8) {
    drawLength = pathLength;
  } else if (scrollPercentage >= 0.6) {
    drawLength = pathLength * (scrollPercentage - 0.6) * 5;
  }

请注意，5 = 1/(0.8 - 0.6)