当用户看到它时开始动画

Question

我正在尝试修复我的动画并在用户看到带有该动画的部分时运行它，但我被卡住了并且无法弄清楚。我正在尝试使用 gsap 或 luxy.js，但找不到解决方案。 我还试图让用户“原地”滚动，直到动画完成，然后他们才能向下移动页面。

<div style="height: 150vh; width: 100%;"></div>
        <section style="height: 150vh;">
            <div id="svg-container2" style="position: absolute; top: 100px;">
            <svg viewBox="0 0 1440 320" style="transform: scaleX(-1)">
            <path id="my-path-2" class="path-2" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
          </svg>
          </div>  
            <svg viewBox="0 0 1440 320">
                <path id="my-path" class="path-" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
              </svg>
        </section>        

svg {
    width: 100%;
    height: 30%;
    z-index: -1;
  }
  path {
    stroke: #0099ff;
    stroke-width: 2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    fill: none;
  }

const path1 = document.querySelector("#my-path");
const pathLength1 = path1.getTotalLength();
path1.style.strokeDasharray = pathLength1;
path1.style.strokeDashoffset = pathLength1;

const path2 = document.querySelector("#my-path-2");
const pathLength2 = path2.getTotalLength();
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = pathLength2;

window.addEventListener("scroll", () => {
  const scrollTop = window.pageYOffset;
  const scrollHeight = document.body.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / scrollHeight;

  const drawLength1 = pathLength1 * scrollFraction;
  path1.style.strokeDashoffset = pathLength1 - drawLength1;

  let drawLength2 = pathLength2 * scrollFraction;
  let offset2 = pathLength2 - drawLength2;
  if (scrollFraction === 1) {
    offset2 = pathLength2 - 1;
  }
  path2.style.strokeDasharray = pathLength2;
  path2.style.strokeDashoffset = offset2;

  if (drawLength2 <= 0) {
    path2.style.strokeDasharray = pathLength2;
    path2.style.strokeDashoffset = pathLength2;
  }
});

我希望有人能做到这一点并提供帮助。 感谢所有尝试的人！ <3

Answer 1

你可以使用类似的东西：

function reveal(){
  var reveals = document.getElementbyid("your_animation);
  
   var windowheight = window.innerHeight;
    var revealtop = value.getBoundingClientRect().top; //this gets the top distance from the element, although getBoundingClientRect() can get height, width, right, top, left, bottom values.
//so, the .top after it specifies only top position.
    var revealpoint = 50;
    if(revealtop < windowheight - revealpoint){ //lets say windowheight is 700 and revealpoint is 100, their value after minusing is 600.
// So this code says if the top value (any number) is less than 600 after scrolling, trigger the block of code below. 
//Although you can change the value to taste 😅
      reveals.classList.add("active"); //With this you can put .active in your css code to start animation.
    } 
    else{
      reveals.classList.remove("active"); //if it is higher than 600 trigger this one. 
//This is to make sure the animation doesn't start when the div or whatever is not in view
    }
  
}

为了让屏幕/滚动条在视图中停留，你可以把它放在你的 css 的活动类中

overflow-y: "hidden";

Opps 差点忘了你必须在动画完成后释放屏幕。

我建议您在 js 代码中指定动画的持续时间，如果您可能会调用该类：

document.getElementsByClassName("active")

如果持续时间结束，你会说

overflow-y: "scroll"

Please use

setTimeout(your_function, 3000 /*animation_duration*/) 

against the duration to create a small delay until animation duration is elapsed,

setTimeout

会调用一个函数来设置 overflow-y 滚动。