用JS和CSS3實現打字動畫

lentoo 發布于2019-08-01 17:17 / 2157人閱讀

摘要：我們經常希望一段文本中的字符逐個顯示，模擬出一種打字的效果。類似于終端命令行的感覺。

我們經常希望一段文本中的字符逐個顯示，模擬出一種打字的效果。類似于終端命令行的感覺。最終效果

用JS去實現：

html：

js代碼：

const $ = attr => document.querySelector(attr);
const textDom = $(".text");
const cursorDom = $(".cursor");
const input = (text) => {
  const textArr = text.split("");
  let index = 0;
  const timer = setInterval(() => {
    const showText = textArr.slice(0, index).join("");
    textDom.innerHTML = showText;
    index++;
    if (index > textArr.length) clearInterval(timer);
  }, 100);
  setInterval(() => {
    if (cursorDom.style.display === "none") {
      cursorDom.style.display = "inline";
    } else {
      cursorDom.style.display = "none";
    }
  }, 500);
}
input("The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.");

用CSS3去實現：

JS實現給人的感覺又臭又長，那能不能用CSS去實現呢？
html：

The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.

@keyframes typing {
    from { width: 0 }
}

@keyframes caret {
    50% { border-right-color: transparent; }
}

h1 {
  font: bold 200% Consolas, Monaco, monospace;
  width: 108ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: .05em solid;
  animation: typing 10.8s steps(108),
            caret 1s steps(1) infinite;
}

字符串長度是108;

總結：

js實現不用考慮兼容性，CSS3實現的需要考慮兼容性，還要兼顧字符串的長度and寬度且不能換行==，不能換行，不過使用起來似乎更簡單一些，具體的取舍還是看個人習慣。

補充:

以前看某公司的主頁有這個打字動畫的效果，今天看發現有個代碼高亮的效果，于是優化了代碼：

//...
const timer = setInterval(() => {
  const showText = textArr.slice(0, index).join("");
  textDom.innerHTML = showText;
  let current = text.substr(index, 1);
  if (current === "<") {
    index = text.indexOf(">", index) + 1;
  }
  else {
    index++;
  }
  if (index > textArr.length) clearInterval(timer);
 }, 100);
//...
input("The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.");

效果似乎還是不一樣，我要的效果應該是輸入結束的時候才高亮，我先看看，實現了再補充...

繼續補充：

看來只能祭出強無敵的正則匹配了==

//...
const timer = setInterval(() => {
  const showText = textArr.slice(0, index).join("").replace(/([sS]*)/ig, "$1");
  textDom.innerHTML = showText;
  let current = text.substr(index, 1);
  if (current === "<") {
    index = text.indexOf(">", index) + 1;
  }   
  else {
    index++;
  } 
  if (index > textArr.length) clearInterval(timer);
}, 100);
//...
input("The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.");

完成
完整代碼：



    
        自動打字
        
        
        
    
    
        >>>
        
        
        The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.

GPU云服務器云服務器 jquery打字動畫 js實現gif動畫 css3動畫高性能css3動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51078.html

用JS和CSS3實現打字動畫

摘要：我們經常希望一段文本中的字符逐個顯示，模擬出一種打字的效果。類似于終端命令行的感覺。我們經常希望一段文本中的字符逐個顯示，模擬出一種打字的效果。類似于終端命令行的感覺。最終效果用JS去實現： html： js代碼： const $ = attr => document.querySelector(attr); const textDom = $(.text); const cu...

ernest.wang 2019-08-20 18:25 評論0 收藏0
67 個拯救前端開發者的工具、庫和資源

摘要：庫一個用來在中創建炫酷的浮動粒子的庫一個用來在中創建物體和空間的庫快速實現全屏滾動特性打字機效果滾動到某個元素位置時觸發一個功能語法高亮使用創建漂亮的圖表能夠明顯加速網站加載時間，鼠標時預加載資源另一個圖表庫一個基于動畫和平移的雪碧圖庫實現 Javascript 庫 Particles.js? 一個用來在 web 中創建炫酷的浮動粒子的庫 Three.js? 一個用來在 web 中創...

XiNGRZ 2019-08-22 16:00 評論0 收藏0
11 個最好的 JavaScript 動態效果庫

摘要：經過一番研究，我收集了個最好的庫，你可以用在自己的項目中。該庫于年月首次推出，目前仍有近名參與者開發。超過的，是一個動畫庫，可以處理屬性單個轉換或任何屬性，以及對象。對智能設備的方向作出反應的視差引擎快速創建漂亮的動畫。翻譯：瘋狂的技術宅原文：https://blog.bitsrc.io/11-jav... 當我想要在網上找一個簡潔的 Javascript 動效庫時，總是發現很多推...

wawor4827 2019-08-23 16:06 評論0 收藏0
CSS3 實現多個動畫效果

摘要：利用實現動畫效果內容皮球掉地上反彈起來純實現效果圖片移動實現打字輸入效果效果更多點我看效果博客放在上了，歡迎大家，我會持續更新一些效果。利用 CSS3 實現動畫效果 showImg(https://segmentfault.com/img/bVUATb?w=189&h=267); 內容皮球掉地上反彈起來純 CSS 實現 gif 效果圖片移動實現打字輸入效果效果 // h...

since1986 2019-08-29 13:22 評論0 收藏0
值得看看，2019 年 11 個受歡迎的 JavaScript 動畫庫！

摘要：超過的星星，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。超過星星，這個動畫庫大小只有。超過星星，這個庫基允許你以選定的速度為字符串創建打字動畫。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超過46K的星星，...

浠ラ箍 2019-08-23 13:59 評論0 收藏0