Animation 在 html,css,js

Question

I included a SVG on scroll animation that looks like this:我在卷轴 animation 上添加了一个 SVG，如下所示：

 document.addEventListener("DOMContentLoaded", function(event) { // Get a reference to the <path> var path = document.querySelector('#star-path'); // Get length of path... ~577px in this case var pathLength = path.getTotalLength(); // Make very long dashes (the length of the path itself) path.style.strokeDasharray = pathLength + ' ' + pathLength; // Offset the dashes so the it appears hidden entirely path.style.strokeDashoffset = pathLength; // Jake Archibald says so // https://jakearchibald.com/2013/animated-line-drawing-svg/ path.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 // Had to try three or four diffe.net methods here. Kind of a cross-browser nightmare. var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); // Length to offset the dashes var drawLength = pathLength * scrollPercentage; // Draw in reverse path.style.strokeDashoffset = pathLength - drawLength; // When complete, remove the dash array, otherwise shape isn't quite sharp // Accounts for fuzzy math if (scrollPercentage >= 0.99) { path.style.strokeDasharray = "none"; path.style.fill = "#47AF9A"; } else { path.style.fill = "none"; path.style.strokeDasharray = pathLength + ' ' + pathLength; } }); });

 body { /* feel free to change height */ height: 5000px; background: linear-gradient( to bottom, orange, darkblue ); } #star-svg { position: fixed; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; }

 <.DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet"/> <script src="script:js"></script> </head> <body> <h1>Scroll-to-draw</h1> <svg xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 200 200.6" id="star-svg"> <path fill="none" stroke="white" stroke-width="2" id="star-path" d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"></svg> </body> </html>

The problem I am facing is that since my website has a lot of content, I want to start this animation at a certain point/position because this animation works if you scroll and since I have a lot of content in my website, whenever I scroll, the animation is happening in the background and when I reach to it, it gets over.我面临的问题是，由于我的网站有很多内容，我想在某个点/位置启动这个 animation，因为如果你滚动，这个 animation 就可以工作，因为我的网站上有很多内容，每当我滚动时, animation 在后台发生，当我到达它时，它就结束了。 How would I modify my js code to make the animation work only at a certain time ?我将如何修改我的js代码以使 animation 仅在特定时间工作？ Any suggestions?有什么建议么？

For example:例如：

 document.addEventListener("DOMContentLoaded", function(event) { // Get a reference to the <path> var path = document.querySelector('#star-path'); // Get length of path... ~577px in this case var pathLength = path.getTotalLength(); // Make very long dashes (the length of the path itself) path.style.strokeDasharray = pathLength + ' ' + pathLength; // Offset the dashes so the it appears hidden entirely path.style.strokeDashoffset = pathLength; // Jake Archibald says so // https://jakearchibald.com/2013/animated-line-drawing-svg/ path.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 // Had to try three or four diffe.net methods here. Kind of a cross-browser nightmare. var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); // Length to offset the dashes var drawLength = pathLength * scrollPercentage; // Draw in reverse path.style.strokeDashoffset = pathLength - drawLength; // When complete, remove the dash array, otherwise shape isn't quite sharp // Accounts for fuzzy math if (scrollPercentage >= 0.99) { path.style.strokeDasharray = "none"; path.style.fill = "#47AF9A"; } else { path.style.fill = "none"; path.style.strokeDasharray = pathLength + ' ' + pathLength; } }); });

 body { /* feel free to change height */ height: 5000px; background: linear-gradient( to bottom, orange, darkblue ); } #star-svg { position: fixed; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; }

 <.DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet"/> <script src="script:js"></script> </head> <body> <h1>Scroll-to-draw</h1> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <section> text goes here </section> <svg xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 200 200.6" id="star-svg"> <path fill="none" stroke="white" stroke-width="2" id="star-path" d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"></svg> </body> </html>

How would I make the animation work after the last text goes here line and make it start from there?我将如何使 animation 在最后一条text goes here行并从那里开始后工作？ Any suggestions?有什么建议么？ Right now it does not work like that现在它不能那样工作

Answer 1

In your scroll listener, you should check if the element is scrolled into view, if not, wait to run the animation until the element is in view on the page.在你的滚动监听器中，你应该检查元素是否滚动到视图中，如果没有，等待运行 animation 直到元素在页面上可见。

You can use this function to determine if an element is in view:您可以使用此 function 来确定元素是否在视图中：

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

(from https://stackoverflow.com/a/488073/14981680 ) （来自https://stackoverflow.com/a/488073/14981680 ）

Animation 在 html,css,js

问题描述

1 个解决方案

解决方案1
1 2021-01-28 05:12:24

Animation 在 html,css,js

问题描述

1 个解决方案

解决方案1 1 2021-01-28 05:12:24

解决方案1
1 2021-01-28 05:12:24