html，css，js中的动画 [英] Animation in html,css,js
本文介绍了html，css，js中的动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在滚动动画中包含了一个SVG，如下所示:
I included a SVG on scroll animation that looks like this:
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 differnet 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>我面临的问题是，由于我的网站上有很多内容，我想在某个点/位置开始播放此动画，因为如果您滚动该动画可以正常工作，并且我有一个网站上的很多内容，每当我滚动时，动画就会在背景中发生，当我到达它时，动画就结束了.如何修改 js 代码以使动画仅在确定的时间下工作?有什么建议吗?
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. How would I modify my js code to make the animation work only at a certain time? Any suggestions?
例如:
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 differnet 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? Any suggestions? Right now it does not work like that
推荐答案
在滚动侦听器中，您应检查元素是否已滚动到视图中，否则，请等待运行动画，直到该元素在页面上可见为止
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.
您可以使用此功能来确定元素是否在视图中:
You can use this function to determine if an element is in view:
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));
}
(来自 https://stackoverflow.com/a/488073/14981680 )
这篇关于html，css，js中的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
