Question

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

我的任务是在此页面的标题上重新创建动画文本效果https://studioakademi.com/滚动时，单词中的字母从字形样式字体切换为实际字体。我已经查看了源代码，但看不到任何有关使这种情况发生的线索。有人可以给它一些启发吗？还是建议一种可以做得更好的方法？到目前为止，我无法从搜索中找到任何内容。

任何建议，我们将不胜感激。干杯授予

Answer 1

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

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

向下滚动后，更改为：

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

然后看一下CSS：

section.frontpage-intro-text h1.intro-text-fadeout {
    transition: opacity 400ms ease-in-out;
}

和褪色：

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

因此，基本上，当您将类faded添加到h1元素时，它会在400ms中逐渐消失为0不透明，可以很容易地在jquery中完成，这是概念证明：

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

Answer 2

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

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

  return text;
}

使用上述函数获取随机字符，然后使用setInterval随机更改页眉中的文本，并在间隔后将文本更新为预期的文本。这将为您带来类似于网站上的效果。

更新：

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

假设您有一个ID为<span>的{{1}}标记和一些文本。您可以像这样在JavaScript中访问它。

text_to_change

现在，我们有了带有字符串的文本，其值是'sometext' 使用var text = document.getElementById("text_to_change").value

获取字符串的长度

检查下面的示例以了解其工作原理，并尝试使用代码以获取所需的输出。希望对您有帮助！

示例

text.length

正在使用哪种方法来创建这种动画文本效果？

2 个答案:

示例