Question

我在网站上看到了一段非常酷的动画，这是我想要学习的东西，因为我有机会在我自己的项目上实现这样的东西。在前端工作中有经验的人能告诉我这是什么，并且可能指出我正确的方向吗？

在这一边：reflektive.com你会在滑块中看到文字“Talent Development”，文本如何变化以及滚动的排序。

感谢您的任何提示！

Answer 1

使用this库。您在问题中提到的网站上使用的相同库。

<script src="jquery.js"></script> // jquery library
<script src="typed.js"></script> // typed.js library
<script>
    $(function(){
        $(".element").typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
    });
</script>


<span class="element"></span>

Answer 2

我找到了一个链接......这是你想要的动画吗？

http://codepen.io/rusjames/pen/uAFhE

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
}


p{
  width: 30em;
  animation: type 4s steps(60, end); 
}

CSS / JS的动画文字？

2 个答案: