Hello, I am a novice in the field of web development and I am attempting to create a website where, upon loading it, a text with a typing animation will appear centered in the middle. Eventually, the remaining words in the div will be 'Nice Paws'. Subsequently, there will be an animation that translates its Y position and moves it to the top of the screen.
My question is how can I translate the Y position so that it always ends up at the top of the screen without disappearing when the window is resized?
Any assistance on this matter would be greatly appreciated! Thank you!
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e3eeeef5f2f5f3e0f1c1b4afb3afb3">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfaba6afbabbf1b5ac9fedf1eff1eeed">[email protected]</a>"></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)
}
}
})
I attempted using 'vh' instead of 'px' but when resizing the screen it simply vanishes as well.