javascript - Cropping text in animation by text height

I have a block with the text TEXT TEST. Here the word text should change with the help of animation. But I have a problem that during animation the text TEST goes beyond the height of the text TEXT, which should not happen. And I can't make it so that TEST is cut off

This is how it works for me now

And it should be something like this

Help me please

$(document).ready(function() {
    let currentAnimation = true;

    function animateText() {
        if (currentAnimation) {
            $(".red").css({
                transform: "translateY(-100%)",
                opacity: 0
            });

            $(".blue").css({
                transform: "translateY(0)",
                opacity: 1
            });
        } else {
            $(".red").css({
                transform: "translateY(0)",
                opacity: 1
            });

            $(".blue").css({
                transform: "translateY(100%)",
                opacity: 0
            });
        }

        currentAnimation = !currentAnimation;

        setTimeout(() => {
            requestAnimationFrame(animateText);
        }, 2000);
    }

    requestAnimationFrame(animateText);
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111;
  color: white;
  font-size: 48px;
  font-family: Arial, sans-serif;
}

.title {
  display: inline-block;
  overflow: hidden;
}

.red, .blue {
  position: absolute;
  display: inline-block;
  transition: transform 1s ease, opacity 1s ease;
}

.red {
  color: red;
}

.blue {
  color: blue;
  transform: translateY(100%);
  opacity: 0;
}

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src=".6.0.min.js"></script>
</head>
<body>

<div class="title">TEXT<span class="red">TEST</span><span class="blue">TEST</span></div>

This is how it works for me now

And it should be something like this

Help me please

$(document).ready(function() {
    let currentAnimation = true;

    function animateText() {
        if (currentAnimation) {
            $(".red").css({
                transform: "translateY(-100%)",
                opacity: 0
            });

            $(".blue").css({
                transform: "translateY(0)",
                opacity: 1
            });
        } else {
            $(".red").css({
                transform: "translateY(0)",
                opacity: 1
            });

            $(".blue").css({
                transform: "translateY(100%)",
                opacity: 0
            });
        }

        currentAnimation = !currentAnimation;

        setTimeout(() => {
            requestAnimationFrame(animateText);
        }, 2000);
    }

    requestAnimationFrame(animateText);
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111;
  color: white;
  font-size: 48px;
  font-family: Arial, sans-serif;
}

.title {
  display: inline-block;
  overflow: hidden;
}

.red, .blue {
  position: absolute;
  display: inline-block;
  transition: transform 1s ease, opacity 1s ease;
}

.red {
  color: red;
}

.blue {
  color: blue;
  transform: translateY(100%);
  opacity: 0;
}

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="title">TEXT<span class="red">TEST</span><span class="blue">TEST</span></div>

Share Improve this question asked Mar 25 at 17:37 Hector 216 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

Update the .title style:

.title {
  position: relative; /* defines it as the container for the absolute positioned elements
  overflow-y: clip; /* allows overflow on the x axis but clips the y axis
}

$(document).ready(function() {
  let currentAnimation = true;

  function animateText() {
    if (currentAnimation) {
      $(".red").css({
        transform: "translateY(-100%)",
        opacity: 0
      });

      $(".blue").css({
        transform: "translateY(0)",
        opacity: 1
      });
    } else {
      $(".red").css({
        transform: "translateY(0)",
        opacity: 1
      });

      $(".blue").css({
        transform: "translateY(100%)",
        opacity: 0
      });
    }

    currentAnimation = !currentAnimation;

    setTimeout(() => {
      requestAnimationFrame(animateText);
    }, 2000);
  }

  requestAnimationFrame(animateText);
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111;
  color: white;
  font-size: 48px;
  font-family: Arial, sans-serif;
}

.title {
  position: relative;
  overflow-y: clip;
}

.red,
.blue {
  position: absolute;
  display: inline-block;
  transition: transform 1s ease, opacity 1s ease;
}

.red {
  color: red;
}

.blue {
  color: blue;
  transform: translateY(100%);
  opacity: 0;
}

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="title">TEXT<span class="red">TEST</span><span class="blue">TEST</span></div>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744178743a4561880.html

javascript - Cropping text in animation by text height - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Cropping text in animation by text height - Stack Overflow

1 Answer 1

相关推荐