Javascript 用CSS/JS洗牌文本动画？_Javascript_Html_Jquery_Css_Frontend

Javascript 用CSS/JS洗牌文本动画？

javascript html jquery css

Javascript 用CSS/JS洗牌文本动画？,javascript,html,jquery,css,frontend,Javascript,Html,Jquery,Css,Frontend,我想在网站主页上显示“Hello”一词。我使用CSS在页面开始加载时进行“Hello”转换。我想实现一个随机移动的动画，在不同语言的单词Hello之间随机移动。我想做一个动画，当“Hello”在开始时向上滑动时，“Hello”会向上滑动更多，逐渐消失。当这种情况发生时，例如，一个“你好”从下面滑上并发生。我想象这永远重复是否有任何方法可以使用CSS、JavaScript、Jquery或任何其他web工具实现此类动画？下面是我拥有的HTML、CSS和JS结构，它只在页面加载时实现初始转换： &l

我想在网站主页上显示“Hello”一词。我使用CSS在页面开始加载时进行“Hello”转换。我想实现一个随机移动的动画，在不同语言的单词Hello之间随机移动。我想做一个动画，当“Hello”在开始时向上滑动时，“Hello”会向上滑动更多，逐渐消失。当这种情况发生时，例如，一个“你好”从下面滑上并发生。我想象这永远重复

是否有任何方法可以使用CSS、JavaScript、Jquery或任何其他web工具实现此类动画？下面是我拥有的HTML、CSS和JS结构，它只在页面加载时实现初始转换：

<body>
  <section>
    <h1 id="switch">Hello</h1>
  </section>
</body>

在CSS中，您需要为

淡入动画设置@关键帧，。然后，您可以添加希望为可设置动画的属性不透明度和顶部位置设置动画的持续时间的百分比。确保您的持续时间与设置时间间隔相匹配
@关键帧：
在我的示例中，我设置了一个tween，它将从0%
开始，在vh长度中的不透明度0和顶部位置，然后当tween达到70%
时，它将向上移动到5vh
，在那里它将保持1
的不透明度，直到90%
，当其不透明度开始淡出时。在100%
时，它将是0
的opacity，然后循环在css动画中设置为infinte
时重新开始，元素将重置为20vh
，动画将再次重复自身
*你可以在@keyframes规则中使用百分比来获得你想要的淡入淡出的效果，等等

让currentIndex=0；
常量hello=['hello'，'Bonjour'，'Hola']；
函数索引（）{
return~~~（Math.random（）*hello.length）；
};
setInterval（函数（）{
设newIndex=randomIndex（）；
而（newIndex==currentIndex）newIndex=randomIndex（）；
currentIndex=newIndex；
document.getElementById（“开关”）.textContent=hello[currentIndex]；
}, 2300);
*{
保证金：0；
填充：0；
框大小：边框框；
}
部分{
文本对齐：居中；
}
第h1节{
字体大小：100px；
字号：420；
位置：绝对位置；
顶部：5vh；
左：50vh；
不透明度：0；
动画：淡入2.3秒，淡入淡出无限；
}
@关键帧淡入{
0% {
不透明度：0；
顶部：20vh；
}
70%,
90% {
不透明度：1；
顶部：5vh；
}
100% {
不透明度：0；
顶部：5vh；
}
}

你好
由于问候语不是真正意义上的问候语（例如，您不希望每隔几秒钟向屏幕阅读器读出问候语），您可以将其放在伪before元素的主体（或另一个合适的元素，具体取决于您想要的结构）上。这样，它基本上是装饰，而不是意义
此外，为了避免出现计时问题（设置间隔可能与关键帧动画的计时不一致），您可以感测animationend事件，然后设置下一个300ms的计时，然后重置动画以再次运行

让currentIndex=0；
常量hello=['hello'，'Bonjour'，'Hola']；
函数索引（）{
return~~~（Math.random（）*hello.length）；
};
函数getNext（）{
设newIndex=randomIndex（）；
而（newIndex==currentIndex）newIndex=randomIndex（）；
currentIndex=newIndex；
document.body.style.setProperty（'--greeting'，“'+hello[currentIndex]+”）；
document.body.style.setProperty（'--animationname'，none'）；
setTimeout（函数（）{
document.body.style.setProperty（'--animationname'，move'）；
}, 300);
}
document.body.addEventListener（'animationend'，getNext）
正文{
--问候语：“你好”；
--动画名称：移动；
}
身体：：之前{
内容：var（--问候语）；
动画持续时间：2秒；
动画迭代次数：1；
动画名称：var（--animationname）；
位置：绝对位置；
最高：100%；
字体大小：100px；
字号：420；
位置：绝对位置；
左：200px；
动画计时功能：线性；
动画填充模式：正向；
}
@关键帧移动{
0% {
最高：100%；
不透明度：0；
}
50% {
最高：50%；
不透明度：1；
}
100% {
最高：0%；
不透明度：0；
}
}
section {
    text-align: left;
}
section h1 {
    font-size: 100px;
    font-weight: 420;
    position: absolute;
    top: 130px;
    left: 200px;

    opacity: 0;
    transform: translateY( 43px );
    animation-name: fade-in;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

var currentIndex = 0;
var hello = new Array( 'Hello', 'Bonjour', 'Hola' );

function randomIndex( ) { 
    return Math.floor( Math.random( ) * hello.length);
};

window.setInterval( function( ) {
    var newIndex = randomIndex( );
    while( newIndex === currentIndex ) newIndex = randomIndex();
    currentIndex = newIndex;
    document.getElementById("switch").textContent = hello[ currentIndex ]; 
}, 2300 );