JS實作

最近做專案的時候需要實現一個字符逐個出現的打字效果，在網上一搜有個不錯的jQuery插件Typed.js，效果很讚

<p class="element"></p>

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

具體用法可以看看項目地址，帶註釋的源碼200多行，不算複雜

實現方法也不神奇，大多數人肯容易可以想到，用js逐個向容器內添加字符，作者做了很多字符的出來還有速度神馬的，我們可以擼一個簡單的

var s = 'Hello World! Hello World! Hello World!';
var con = $('.container');
var index = 0;
var length = s.length;
var tId = null;

function start(){
  con.text('');
  
  tId=setInterval(function(){
    con.append(s.charAt(index));
    if(index++ === length){
    clearInterval(tId);
    index = 0;
    start()
    }
  },100);
}

start();

JS Bin

CSS實現

如果對細節和瀏覽器相容性要求的不是很嚴格，我們可以透過CSS3實現

animation-ti CSS3的動畫都接觸過，我們平常也這麼用

animation: animation-name animation-duration animation-iteration-count

animation: name 5s infinite;

其實完整版的animation參數很多，也可以寫成分別的屬性

animation-name

1. animation-du-du-duion function

2. animation-delay

3. animation-iteration-count

4. animation-direction
animation-direction
6. 的，jQuery動畫的時候我們用的liner參數就是這意思，但CSS3提供了一些其它的變化方式由animation-timing-function屬性指定

1. ease-out

2. ease-in-out

3. step-start

每種動畫效果都可以對應一種貝塞爾曲線cubic-bezier可以幫我直觀的看一下貝塞爾曲線效果，這裡不多說了

5. steps

我們看一下steps的效果，其實顧名思義就可以想到steps什麼意思，就像俄羅斯方塊的小格子往下掉也是動畫，但是不是連續的，更像是逐幀的，steps就是實現這種效果的

6. steps的語法

   steps(number_of_steps, [start|end])

   登入後複製

7. number_of_steps 動畫分為多少步執行

8. direction 動畫顯示狀態，end：預設值，第一幀開始前顯示，start：第一幀結束後顯示

9. 看科學的圖片幫助理解

• .walk {
    width: 125px;
    height: 150px;
    background: url(//m.sbmmt.com/) left;
    -webkit-animation:anima 1s steps(16) infinite ;
  }
  
  @-webkit-keyframes anima{
      from { background-position:2000px 0;}
      to {background-position:0px 0;}
  }

  登入後複製
打字效果

• 打字效果也就可想而知了，改變容器寬度即可（只能單行使用，還得做到每步增加長度和字母寬度一致，還是js好其實）

  .typing{
      width:250px;
      white-space:nowrap;
      overflow:hidden;
      -webkit-animation: type 3s steps(50, end) infinite;
    animation: type 3s steps(50, end) infinite;
  }
  
  
  @-webkit-keyframes type{
      from { width: 0;}
  }
  
  @keyframes type{
      from { width: 0;}
  }

  登入後複製
JS Bin

更多CSS 實現打字效果相關文章請關注PHP中文網！