Html Question posted in
Some basic documentation can be found here.

Html – Animate text while using background-clip with text

I’m trying to animate text and change the color in the middle of the screen, like this
enter image description here

HTML

<div class="text-mask">
    <div class="scrolling-text">MASKED TEXT</div>
</div>

CSS

body {
  background-color: #000;
}
.text-mask {
  font-size: 100px;
  font-weight: bold;
  background: linear-gradient(to right, orange 50%, white 50%);
  background-clip: text;
  color: transparent;
  position: relative;
  height: 120px;
}

.scrolling-text {
  /* transform: translateX(10px); */
  /* position: relative */
  
}

DEMO

As soon as I apply the styling of .scrolling-text the text is gone. The idea I had was to change the value of the transform in order to get the walking/animated text.

Is there a way I can achieve this?

Tags:

2

Answers


  1. 0

    It looks like you’re trying to achieve a cool animated text effect! To fix the disappearing text issue, you might want to check how background-clip: text and color: transparent are applied. Also, ensure that the text stays within the visible area by managing overflow and positioning properly. Adding an animation to transform should create the scrolling effect you’re aiming for. Would love to see the final result when you get it working!

    Login or Signup to reply.
  2. 0

    transform and background-clip should belong to the same element

    body {
  background-color: #000;
  overflow: hidden;
}

.scrolling-text {
   --offset: 10px; /* adjust this to control the movement */
 
  transform: translateX(var(--offset));
  font-size: 50px;
  font-weight: bold;
  background: 
    linear-gradient(90deg, orange 50%, white 0)
    calc(50% - var(--offset))/400% 100%;
  background-clip: text;
  color: transparent;
}
    <div class="scrolling-text" style="--offset: 150px;">MASKED TEXT</div>
<div class="scrolling-text" style="--offset: 100px;">MASKED TEXT</div>
<div class="scrolling-text">MASKED TEXT</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search