Javascript 使用什么方法来创建此动画文本效果？

希望这是在正确的地方问这个问题

我的任务是在滚动页面的标题上重新创建动画文本效果，文字中的字母从字形字体切换到实际字体。我已经看过了源代码，但看不到任何导致这种情况发生的线索。有人能解释一下吗？或者建议一种接近它的方法？到目前为止，我还没有找到任何东西

非常感谢您的建议。 干杯 Grant

先看一下html： 在向下滚动之前，包含文本的html元素如下所示，请注意类：

<h1 class="intro-text-fadeout">
            Design studio<br>
            with digital<br>
            focus.
</h1>

至于：

section.frontpage-intro-text h1.intro-text-fadeout.faded {
    opacity: 0;
}

因此，基本上，当您将class

laded

添加到

h1

元素时，它会在

400ms

中淡出到0不透明度，这可以在jquery中轻松完成，概念验证：

$('h1.intro-text-fadeout').scroll(function(){
    if($(this).scrollTop > 100){
        $(this).addClass('faded');
    }else{
        $(this).removeClass('faded');
    }
});

使用上述函数获取一个随机字符，然后使用

setInterval

随机更改标题中的文本，并在间隔后将文本更新为预期的文本。这将给你一个类似于网站上的效果

更新：

<span id='text_to_change'>sometext</span>

现在我们有了一个字符串，值为“sometext” 使用

text.length

检查下面的示例，了解它是如何工作的，可以使用代码获得所需的输出。希望有帮助

例子

function randomtext（）
{
var text=“”；
var-mable=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyz”；
text+=可能的.charAt（Math.floor（Math.random（）*可能的.length））；
返回文本；
}
函数replaceAt（字符串、索引、替换）{
返回string.substring（0，索引）+replace+string.substring（索引+1）；
}
var text_val=“sometext”
var final_text=“IamChangedText”
函数回调（i）
{
var j=数学地板（（数学随机（）*25）+5）；
var test=setInterval（函数（）{
j--；
如果（i<最终文本长度）
{
text_val=replaceAt（text_val，i，randomtext（））
}
如果（j>1）
{
清除间隔（试验）；
如果（i<最终文本长度）
{
text_val=replaceAt（text_val，i，final_text.charAt（i））
console.log（文本值）
回调（i+1）；
}
}
},50);
}
console.log（文本值）
回调（0）

您可以使用“builtWith”chrome扩展来了解网站中使用了哪些框架和技术。哦，我想我误解了你的问题，非常感谢你对这个Stetoc的关注，我真的很感激！但我应该说得更清楚，我指的是在那之后出现的时髦的动画效果，稍微低一点，它似乎会随机切换出单词中的字母。谢谢Faik Malik，我不确定我是否理解你这里的所有内容，但我会看看我是如何处理的。我可能需要更多的帮助。感谢您对这个问题的关注。嗨，Faik，函数randomtext（）{var text=”“；var-mable=“abcdefghijklmnopqrstuvwxyzabdfghijklmnopqrstuvxyz”；text+=mable.charAt（Math.floor（Math.random（）*可能.length））；返回文本；}嗨，Faik，对不起，第一个从我身边跑掉了。我对javascript理解不够透彻，无法理解你告诉我的内容。你能再解释一下吗？哇！谢谢Faik，非常详细的回答。我会研究你在那里做了什么。再次感谢。非常感谢它的帮助，请选择它作为解决方案。

$('h1.intro-text-fadeout').scroll(function(){
    if($(this).scrollTop > 100){
        $(this).addClass('faded');
    }else{
        $(this).removeClass('faded');
    }
});

  function randomtext() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

  text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

<span id='text_to_change'>sometext</span>

var text = document.getElementById("text_to_change").value