使用CSS从右向左滑动文本直到文本字符串结束

Question

我正在尝试创建一个从右向左滑动文本的 slider 组件，如果文本的长度比 div 元素的宽度长，则继续移动文本直到到达文本末尾。

我刚刚滑动的代码直到文本的开头到达 div 元素的左端，我试图让它移动直到字符串的末尾到达 div 元素的右侧div。滑块组件将有两个短于宽度的字符串，在这种情况下，文本应移动到 div 的左侧，如果它长于宽度，则应移动字符串的末尾到达 div div.

右侧

关于如何移动此文本直到文本末尾到达 div 右侧的任何指示或建议？

代码:

.slider {
    width: 100%;
    overflow: hidden;
    margin-left: 300px;
    background-color: aqua;
  }
  
  .slider h2 {
    animation: slide-left 10s;
  }
  
  @keyframes slide-left {
    from {
      margin-left: 100%;
    }
  
    to {
      margin-left: 0%;
    }
  }

  @keyframes slide-right {
    to {
      transform:translateX(0);
    }
  }

<div className="slider">
<h2>Hello world, I need a very long text to show how the text will move</h2>
</div>

更新

使用计时器，我设法制作了一个在满足条件时停止的动画。我感觉到最后动画速度加快了，所以我会再尝试一下。

.slider {
    width: 100%;
    overflow: hidden;
    margin-left: 300px;
    background-color: aqua;
  }
  
  .slider h2 {
      animation: slide-left 30s;
      animation-play-state: paused;
  }
  
  @keyframes slide-left {
    from {
      margin-left: 0%;
    }
  
    to {
        margin-left: -1000%;
    }
  }

  @keyframes slide-right {
    to {
      transform:translateX(0);
    }
  }

    useEffect(() => {
        if(executeTimer){
        let interval = setInterval(() => {
            let sliderElement = document.getElementById('slider');
            let sliderWidth = sliderElement.clientWidth;
            
            setCounter(counter + 1);
            if(counter === 100){
                document.getElementById("slider").style.animationPlayState = "running"; 
            }
            if(sliderWidth >= sliderElement.scrollWidth) {
                setExecuteTimer(false);
                document.getElementById("slider").style.animationPlayState = "paused"; 
            }
            
            },10);
        return () => clearInterval(interval);
        }
    }, [executeTimer, counter]);

return (
        <div className="slider" id="slider-container">
        <h2 id="slider">Hello world, this is just a little bit longer; no it needs to be just a little bit longer</h2>
        </div>
    );

Answer 1

您可以更改

margin-left: 0%;

到

margin-left: -200%;

或至少为 -100% 或以下的其他值。如果文本可能是屏幕的 3 倍宽，则需要 -300%。

Answer 2

我有类似的需求，所以这是我想出的解决方案。

transform: translateX(calc(-100% + 200px));

这对我有用。

唯一的问题是滚动速度取决于文本的长度。它不会打扰我，所以我不会尝试 'fix' 它。

:root {
  --slider-width: 400px;
}

body {
  background-color: gray;
}

.slider {
  width: var(--slider-width);
  height: 40px;
  overflow: hidden;
  background-color: blue;
  white-space: nowrap;
}

.text {
  font-size:26px;
  display: inline-block;
  animation: slide 20s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(calc(-100% + var(--slider-width)));
    }
    
    100% {
        transform: translateX(0%);
    }
}

<div class="slider">
      <div class="text">
        Hello world, I need a very long text to show how the text will move
      </div>
    </div>

希望对您有所帮助。

使用CSS从右向左滑动文本直到文本字符串结束

Using CSS to slide text from right to left until the end the text string

javascript

reactjs

slider

css-animations

marquee