- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我有以下代码:
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
);
}
h1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
color: white;
text-transform: uppercase;
text-align: center;
font-size: 22px;
letter-spacing: 5px;
font-weight: 100;
padding: 25px 15px;
text-shadow: 1px 1px 1px #333;
}
#star-svg {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
Resources
<header>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</header>
<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>
repl.it
但是你们能不能看看它,它会很有帮助,我真的很感激。我能想到的问题是我的代码中缺少一个引用,它在这里工作是因为 StackOverFlow
创建 一个引用,但不是每个 IDE 都有。有什么建议么?
最佳答案
您的 HTML 格式错误:
查看源代码:https://fixedstingytriangle--hussainomer.repl.co/
它是以下内容,并且只有以下内容:
<header>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</header>
<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>
标签 <header>
, 但是一个 <header>
是一个可见元素,只能在 <body>
内.您可能打算使用 <head>
反而。 <!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
... etc
</head>
<body>
... etc
这里最重要的是明确指定一个文档类型。
Without it :
The browser enters Quirks mode and tries to deal with your code as if it was written in the late 90’s. This means they will imitate many bugs that existed in the old browsers. It is not consistent on how to do this (so you will get significantly different results, for example, from Firefox to Internet Explorer).
The purpose of DOCTYPE is to tell the browser what type of HTML you are writing. It is not valid to omit the DOCTYPE. There is no “Standard” format. The browser will just try to parse HTML as best it can. But not all elements will be displayed correctly. DOCTYPE is a required part of all HTML documents.
document.documentElement.clientHeight
将被评估为整个页面的高度,而不是视口(viewport)的高度(导致除以 0 并且整个 H 立即出现)
关于javascript - 相同的代码在不同的 IDE 中不起作用 - html、css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65930101/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!