Javascript开始和结束在一定%的滚动页面

Javascript start and end on certain % of scroll page

本文关键字：滚动 开始 结束 Javascript      更新时间：2023-09-26

我正在寻求帮助。

我有这个codependency应用到我的页面- 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;
 }

谢谢你,马丁

这只是一个适当设置drawLength的例子。

  • 如果它低于0.6(60%)，你希望它为0，
  • 如果它大于0.8你希望它是pathLength
  • 之间需要在0和pathLength之间线性变化。

像这样…

  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)

相关文章：