How can i make the div not fly out of the screen when animating?-CodePudding

Hi im a beginner in web development and i am trying to make this website where when u load it there will be a text centered in the middle that has a typing animation, eventually the words left in the div will be 'Nice Paws'. It will then have this animation that translates its Y position and goes to the top of the screen.

Question is im not sure how to translate the Y position so that it will always end up on the top of the screen and not disappear when i resize the window.

All help is appreciated! Thanks!

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
    <!-- <nav ></nav> -->
    <div  id="slogan-container">
        <div id="slogan"></div><div  id="name-typed"></div>
    </div>
    <div style="height: 100%; background-color: aliceblue;"></div>   
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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 {
    
}

var slogan = new Typed("#slogan", {
    strings: ["Damn, those are some&nbsp;", ""],
    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:

I tried using 'vh' instead of 'px' but when i resize the screen it just disappears as well.

CodePudding user response：

You could calculate the Y translation you need by doing something like: translateY(calc(-50vh 22.5px)), where 22.5px is half of your div.brand-name height.

If you go this route, you may want to specify the line-height of that div to be 45px.

Updated relevant code:

const move = [
    { transform: 'translateY(calc(-50vh   22.5px))' }
];

Working fiddle

CodePudding user response：

Instead of translateY, this solution animates margin-top.

Before transition: margin-top: calc(50vh - 30px)

After transition: {marginTop: "20px"}

The will ensure the animation on brand-name fit changing screen sizes and have a fixed position after the animation.

Live demo: jsfiddle

Hope this will help.

Example:

var slogan = new Typed("#slogan", {
    strings: ["Damn, those are some&nbsp;", ""],
    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) {

            const move = [
            {marginTop: "20px"}
            ];
            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)
        }
    }
})

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: flex-start;
    justify-content: center;

    position: relative;
}

.brand-name {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
}

#slogan, .brand-name {
    margin-top: calc(50vh - 30px);
}

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
    <!-- <nav ></nav> -->
    <div  id="slogan-container">
        <div id="slogan"></div><div  id="name-typed"></div>
    </div>
    <div style="height: 100%; background-color: aliceblue;"></div>   
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="index.js"></script>
</body>
</html>