英文:
Animated ticker in javascript with clickable objects - direction issues with the svg objects
问题
以下是您要翻译的内容：
UPDATED 11/04-2023
So I am trying to create an animated ticker using javascript and svg text elements however I have got something wrong with my animation <s> direction not being straight across the screen horizontally and instead it goes leftward and downward, and it only does it up in the left corner of the screen</s> this is driving me nuts!
To those suggesting I use some framework other than javascript, even libraries don't! as I am trying switch back to a "no frameworks" solution for my site as it seems no matter what you choose, all these frameworks and libraries that make your site looking all nice and lovey dovey get hacked and then you site is in the proverbial gutter and you need to rebuild. So this time I am KISS'ing it - This is the code I have so far, it is almost there it just stops before exiting fully now.
Updated code
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Ani w/Clickable</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#svg-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
white-space: nowrap;
}
.svg-container {
position: absolute;
width: auto;
height: 30px;
}
.svg {
display: inline-block;
cursor: pointer;
}
.svg text {
fill: #333;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="svg-container"></div>
<script>
const links = [
{ text: 'Welcome to a soon fully revamped site - using AI to construct it - click to learn more.', href: './aiwork.html' },
];
const duration = 9000;
const spacing = 20;
function createSVGObject(link) {
const div = document.createElement('div');
div.classList add ('svg-container');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const a = document.createElement('a');
text.setAttribute('y', '20');
text.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
text.textContent = link.text;
svg.appendChild(text);
a.appendChild(svg);
div.appendChild(a);
a.setAttribute('href', link.href);
a.setAttribute('class', 'svg');
const computedWidth = text.getComputedTextLength();
div.style.width = (computedWidth + 10) + 'px'
svg.setAttribute('width', (computedWidth + 10) + 'px');
svg.setAttribute('height', '30');
svg.setAttribute('viewBox', `0 0 ${computedWidth + 10} 30`);
svg.style.overflow = 'visible';
return div;
}
function animateSVGObject(object) {
object.style.top = '0';
object.style.left = window.innerWidth + 'px';
const startTime = performance.now();
requestAnimationFrame(function animate(time) {
const progress = (time - startTime) / duration;
const distance = (window.innerWidth + object.getBoundingClientRect().width + spacing) * progress;
const currentPosition = window.innerWidth - distance;
object.style left = currentPosition + 'px';
if (currentPosition + object.getBoundingClientRect().width > -object.getBoundingClientRect().width) {
requestAnimationFrame(animate);
} else {
setTimeout(() => {
object.style left = window.innerWidth + 'px';
animateSVGObject(object);
}, duration * links.length);
}
});
}
links.forEach((link, index) => {
const svgObject = createSVGObject(link);
document.getElementById('svg-container').appendChild(svgObject);
setTimeout(() => animateSVGObject(svgObject), duration * index);
});
</script>
<p>SVG</p>
</body>
</html>
'''
<s>Any takes on what I am doing wrong with the directionand why the svg does not animate all the way across my screen horizontally ? </s>
请注意，代码部分已排除在外，只提供文本内容的翻译。
英文:
UPDATED 11/04-2023
So I am trying to create an animated ticker using javascript and svg text elements however I have got something wrong with my animation <s> direction not being straight across the screen horizontally and instead it goes leftward and downward, and it only does it up in the left corner of the screen</s> this is driving me nuts!
To those suggesting I use some framework other than javascript, even libraries don't! as I am trying switch back to a "no frameworks" solution for my site as it seems no matter what you choose, all these frameworks and libraries that make your site looking all nice and lovey dovey get hacked and then you site is in the proverbial gutter and you need to rebuild. So this time I am KISS'ing it - This is the code I have so far, it is almost there it just stops before exiting fully now.
Updated code
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Ani w/Clickable</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#svg-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
white-space: nowrap;
}
.svg-container {
position: absolute;
width: auto;
height: 30px;
}
.svg {
display: inline-block;
cursor: pointer;
}
.svg text {
fill: #333;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="svg-container"></div>
<script>
const links = [
{ text: 'Welcome to a soon fully revamped site - using AI to construct it - click to learn more.', href: './aiwork.html' },
];
const duration = 9000;
const spacing = 20;
function createSVGObject(link) {
const div = document.createElement('div');
div.classList.add('svg-container');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const a = document.createElement('a');
text.setAttribute('y', '20');
text.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
text.textContent = link.text;
svg.appendChild(text);
a.appendChild(svg);
div.appendChild(a);
a.setAttribute('href', link.href);
a.setAttribute('class', 'svg');
const computedWidth = text.getComputedTextLength();
div.style.width = (computedWidth + 10) + 'px';
svg.setAttribute('width', (computedWidth + 10) + 'px');
svg.setAttribute('height', '30');
svg.setAttribute('viewBox', `0 0 ${computedWidth + 10} 30`);
svg.style.overflow = 'visible';
return div;
}
function animateSVGObject(object) {
object.style.top = '0';
object.style.left = window.innerWidth + 'px';
const startTime = performance.now();
requestAnimationFrame(function animate(time) {
const progress = (time - startTime) / duration;
const distance = (window.innerWidth + object.getBoundingClientRect().width + spacing) * progress;
const currentPosition = window.innerWidth - distance;
object.style.left = currentPosition + 'px';
if (currentPosition + object.getBoundingClientRect().width > -object.getBoundingClientRect().width) {
requestAnimationFrame(animate);
} else {
setTimeout(() => {
object.style.left = window.innerWidth + 'px';
animateSVGObject(object);
}, duration * links.length);
}
});
}
links.forEach((link, index) => {
const svgObject = createSVGObject(link);
document.getElementById('svg-container').appendChild(svgObject);
setTimeout(() => animateSVGObject(svgObject), duration * index);
});
</script>
<p>SVG</p>
</body>
</html>
'''
<s>Any takes on what I am doing wrong with the directionand why the svg does not animate all the way across my screen horizontally ? </s>
答案1
得分: 0
以下是您提供的代码的翻译部分：
这是我目前得到的结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>具有可点击超链接的SVG动画滚动条</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einar Petersen - 科幻作家和技术爱好者</title>
<link rel="stylesheet" type="text/css" href="ticker.css">
<link rel="stylesheet" type="text/css" href="banner.css">
<link rel="stylesheet" href="indexthumbnails.css">
<link rel="stylesheet" type="text/css" href="navigation.css">
<script src="scripts.js" defer></script>
<meta name="description" content="... - 此页面包含一个具有可点击超链接的SVG动画滚动条">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#svg-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
white-space: nowrap;
}
.svg-container {
position: absolute;
width: auto;
height: 30px;
}
.svg {
display: inline-block;
cursor: pointer;
}
.svg text {
fill: #333;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="svg-container"></div>
<script>
const links = [
{ text: '欢迎来到即将全面改版的网站 - 使用AI进行构建 - 单击以了解更多。', href: './aiwork.html' },
];
const duration = 9000;
const spacing = 20;
function createSVGObject(link) {
const div = document.createElement('div');
div.classList.add('svg-container');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const a = document.createElement('a');
text.setAttribute('y', '20');
text.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
text.textContent = link.text;
svg.appendChild(text);
a.appendChild(svg);
div.appendChild(a);
a.setAttribute('href', link.href);
a.setAttribute('class', 'svg');
const computedWidth = text.getComputedTextLength();
div.style.width = (computedWidth + 10) + 'px';
svg.setAttribute('width', (computedWidth + 10) + 'px');
svg.setAttribute('height', '30');
svg.setAttribute('viewBox', `0 0 ${computedWidth + 10} 30`);
svg.style.overflow = 'visible';
return div;
}
function animateSVGObject(object) {
object.style.top = '0';
object.style.transform = `translateX(${window.innerWidth}px)`;
const startTime = performance.now();
requestAnimationFrame(function animate(time) {
const progress = (time - startTime) / duration;
const distance = (window.innerWidth + object.getBoundingClientRect().width + spacing) * progress;
const currentPosition = window.innerWidth - distance;
object.style.transform = `translateX(${currentPosition}px)`;
if (currentPosition + object.getBoundingClientRect().width > -spacing * 27) {
requestAnimationFrame(animate);
} else {
setTimeout(() => {
object.style.transform = `translateX(${window.innerWidth}px)`;
animateSVGObject(object);
}, duration * links.length);
}
});
}
links.forEach((link, index) => {
const svgObject = createSVGObject(link);
document.getElementById('svg-container').appendChild(svgObject);
setTimeout(() => animateSVGObject(svgObject), duration * index);
});
</script>
<p>SVG</p>
<footer>
<p>© 2023 .... 保留所有权利。</p>
<p>本网站上的某些材料可能受不同许可的约束，在适用的地方将清楚指出。</p>
<ul>
<li><a href="...">... 在Facebook上</a></li>
<li><a href="...">在Twitter上关注... </a></li>
<li><a href="#">Instagram</a></li>
<li><a href="...">成为赞助者</a></li>
</ul>
</footer>
</body>
</html>
请注意，上述翻译只包括HTML代码的部分。如果您需要进一步的翻译或有其他问题，请随时告诉我。
英文:
This was what I ended up with for now
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Aninimated Ticker With Clickable Hyperlinks </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einar Petersen - Science Fiction Writer and Technology Enthusiast</title>
<link rel="stylesheet" type="text/css" href="ticker.css">
<link rel="stylesheet" type="text/css" href="banner.css">
<link rel="stylesheet" href="indexthumbnails.css">
<link rel="stylesheet" type="text/css" href="navigation.css">
<script src="scripts.js" defer></script>
<meta name="description" content="... - This page in particular contains a SVG Aninimated Ticker With Clickable Hyperlinks">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#svg-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
white-space: nowrap;
}
.svg-container {
position: absolute;
width: auto;
height: 30px;
}
.svg {
display: inline-block;
cursor: pointer;
}
.svg text {
fill: #333;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="svg-container"></div>
<script>
const links = [
{ text: 'Welcome to a soon fully revamped site - using AI to construct it - click to learn more.', href: './aiwork.html' },
];
const duration = 9000;
const spacing = 20;
function createSVGObject(link) {
const div = document.createElement('div');
div.classList.add('svg-container');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const a = document.createElement('a');
text.setAttribute('y', '20');
text.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
text.textContent = link.text;
svg.appendChild(text);
a.appendChild(svg);
div.appendChild(a);
a.setAttribute('href', link.href);
a.setAttribute('class', 'svg');
const computedWidth = text.getComputedTextLength();
div.style.width = (computedWidth + 10) + 'px';
svg.setAttribute('width', (computedWidth + 10) + 'px');
svg.setAttribute('height', '30');
svg.setAttribute('viewBox', `0 0 ${computedWidth + 10} 30`);
svg.style.overflow = 'visible';
return div;
}
function animateSVGObject(object) {
object.style.top = '0';
object.style.transform = `translateX(${window.innerWidth}px)`;
const startTime = performance.now();
requestAnimationFrame(function animate(time) {
const progress = (time - startTime) / duration;
const distance = (window.innerWidth + object.getBoundingClientRect().width + spacing) * progress;
const currentPosition = window.innerWidth - distance;
object.style.transform = `translateX(${currentPosition}px)`;
if (currentPosition + object.getBoundingClientRect().width > -spacing * 27) {
requestAnimationFrame(animate);
} else {
setTimeout(() => {
object.style.transform = `translateX(${window.innerWidth}px)`;
animateSVGObject(object);
}, duration * links.length);
}
});
}
links.forEach((link, index) => {
const svgObject = createSVGObject(link);
document.getElementById('svg-container').appendChild(svgObject);
setTimeout(() => animateSVGObject(svgObject), duration * index);
});
</script>
<p>SVG</p>
<footer>
<p>© 2023 .... All rights reserved.</p>
<p>Some material on this website may be subject to different licenses, which will be clearly indicated where applicable.</p>
<ul>
<li><a href="...">... on Facebook</a></li>
<li><a href="...">Follow ... @ Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="...">Become a patron</a></li>
</ul>
</footer>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论