嗨，我是一个初学者在网页开发，我试图使这个网站，当你加载它将有一个文字居中的中间，有一个打字动画，最终的话留在div将是'尼斯爪子'。然后它将有这个动画，翻译其Y位置，并前往屏幕的顶部。
问题是我不知道如何翻译Y的位置，使它始终结束在屏幕的顶部，而不是消失时，我调整窗口的大小。
感谢所有帮助！谢谢！
HTML语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@200;300;400;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<!-- <nav class="trans"></nav> -->
<div class="slogan-container" id="slogan-container">
<div id="slogan"></div><div class="brand-name" id="name-typed"></div>
</div>
<div style="height: 100%; background-color: aliceblue;"></div>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script src="index.js"></script>
</body>
</html>CSS
html, body {
height: 100%;
background-color: antiquewhite !important;
overflow: auto;
}
.slogan-container {
font-family: 'Lexend Deca', sans-serif;
font-size: 30px;
font-weight: 400;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.brand-name {
font-family: 'Lexend Deca', sans-serif;
font-weight: 600;
}
.slogan {
}JS系统
var slogan = new Typed("#slogan", {
strings: ["Damn, those are some ", ""],
typeSpeed: 25,
backSpeed: 19,
loop: false,
showCursor: false,
backDelay: 1500,
onStringTyped: function(pos, slogan) {
if(pos == 0) {
var name = new Typed("#name-typed", {
strings: ["Nice Paws"],
typeSpeed: 25,
loop: false,
showCursor: false,
})
} else if(pos == 1) {
// height = document.getElementById("slogan-container").offsetHeight;
// console.log(height);
const move = [
{ transform: 'translateY(-440px)' }
// { transform: 'translateY(-20vh)' }
];
const moveTiming = {
duration: 1500,
delay: 500,
fill: 'forwards',
easing: 'ease-in-out'
}
var elem = document.getElementById("name-typed");
elem.animate(move, moveTiming);
elem.style.position = 'fixed';
console.log(elem.style.position)
}
}
})Fiddle:
我试着使用“vh”而不是“px”，但当我调整屏幕大小时，它也会消失。
2条答案
按热度按时间xwbd5t1u1#
您可以通过执行以下操作来
calc计算所需的Y平移：translateY(calc(-50vh + 22.5px))，其中22.5px是div.brand-name高度的一半。如果采用这种方法，您可能希望将该div的行高指定为
45px。更新相关代码：
工作fiddle
dz6r00yl2#
此解决方案不是设置
translateY的动画，而是设置margin-top的动画。过渡前：
margin-top: calc(50vh - 30px)过渡后：
{marginTop: "20px"}将确保
brand-name上的动画适合不断变化的屏幕大小，并在动画后具有固定的位置。现场演示：jsfiddle
希望这会有所帮助。
示例：
第一个