果演示

橫版

豎版

思路分析

1. 可以看到文字是一段一段的并且獨占一行，使用段落標簽p表示一行
2. 一段文字內，字是一個一個顯示的，所以這里每一個字都用一個span標簽裝起來
3. 每一個字都是從透明到不透明的過渡效果，使用css3的過渡屬性transition讓每個字都從透明過渡到不透明

基本結構

HTML基本結構

<div id="container"></div>

這里只需要一個容器，其他的結構通過js動態生成

CSS

#container {
  /* 添加這行樣式=>文字縱向從右往左顯示 */
  /* 目前先不設置,后面可以取消注釋 */
  /* writing-mode: vertical-rl; */
}
#container span {
  /* 這里opacity先設置為1，讓其不透明，可以看到每一步的效果 */
  /* 寫完js之后到回來改為0 */
  opacity: 1;
  transition: opacity 0.5s;
}

文本數據

const data=['清明時節鬧坤坤，', '路上行人梳中分；', '借問荔枝何處有，', '蘇珊遙指蔡徐村。']

使用數組存放文本數據，一個元素代表一段文字

創建p標簽

使用for/of循環遍歷數組創建對應個數的p標簽，添加到html頁面中

const data=['清明時節鬧坤坤，', '路上行人梳中分；', '借問荔枝何處有，', '蘇珊遙指蔡徐村。']
// 獲取dom元素
const container=document.querySelector('#container')
// for/of循環遍歷數組
for (const item of data) {
  // 打印每一個item=> 數組的每一個元素
  console.log(item)
  // 創建p標簽
  const p=document.createElement('p')
  // 將p標簽插入到container
  container.append(p)
}

item代表數組的每一個元素，也就是每一段文字，所以會創建4個p標簽

與數組元素數量對應的p標簽就生成好了

接下來就是將每一個元素里面的文本添加到span標簽中

創建span標簽

為每一個字創建一個span標簽，然后讓span標簽的內容等于對應的字，再將每一個生成的span插入到p標簽

本節代碼

// 遍歷item的每一個字
for (let i=0; i < item.length; i++) {
  // 創建span
  let span=document.createElement('span')
  // span的內容等于item的每一個字
  span.innerHTML=item[i]
  // 將span插入到p標簽中
  p.append(span)
}

合并后代碼

const data=['清明時節鬧坤坤，', '路上行人梳中分；', '借問荔枝何處有，', '蘇珊遙指蔡徐村。']
// 獲取dom元素
const container=document.querySelector('#container')
// for/of循環遍歷數組
for (const item of data) {
  // 打印每一個item=> 數組的每一個元素
  console.log(item)
  // 創建p標簽
  const p=document.createElement('p')
  // 遍歷item的每一個字
  for (let i=0; i < item.length; i++) {
    // 創建span
    let span=document.createElement('span')
    // span的內容等于item的每一個字
    span.innerHTML=item[i]
    // 將span插入到p標簽中
    p.append(span)
  }
  // 將p標簽插入到container
  container.append(p)
}

此時已經完成了渲染數組，并將數組的每一個元素的文字渲染到單獨的span中

接下來就要讓每一個文字做到從看不見到看的見的效果

添加透明度過渡效果

將css樣式中的opacity由1改為0

因為每個字的出現時間不一樣，所以不能直接在循環的時候直接添加過渡效果，添加以下代碼，讓span標簽在添加到p標簽前也添加到新數組中

const arr=[]
// 將span也添加到新數組中
arr.push(span)

最后遍歷arr數組，為每一個元素添加一個過渡延遲效果

// 延時1毫秒等待上方循環渲染完成
setTimeout(()=> {
  // 遍歷arr數組的每一個元素
  arr.forEach((item, index)=> {
    // 給每一個元素添加過渡延遲屬性
    item.style.transitionDelay=`${index * 0.2}s`
    // 將透明度設置為不透明
    item.style.opacity=1
  })
}, 1)

最后的最后將css樣式中的opacity改為0，讓所有的字透明

#container span {
  opacity: 0;
  transition: opacity 0.5s;
}

完整js代碼

const data=['清明時節鬧坤坤，', '路上行人梳中分；', '借問荔枝何處有，', '蘇珊遙指蔡徐村。']
const arr=[]
// 獲取dom元素
const container=document.querySelector('#container')
// for/of循環遍歷數組
for (const item of data) {
  // 打印每一個item=> 數組的每一個元素
  console.log(item)
  // 創建p標簽
  const p=document.createElement('p')
  // 遍歷item的每一個字
  for (let i=0; i < item.length; i++) {
    // 創建span
    let span=document.createElement('span')
    // span的內容等于item的每一個字
    span.innerHTML=item[i]
    // 將span插入到p標簽中
    p.append(span)
    // 將span也添加到新數組中
    arr.push(span)
  }
  // 將p標簽插入到container
  container.append(p)
}
// 延時1毫秒等待上方循環渲染完成
setTimeout(()=> {
  // 遍歷arr數組的每一個元素
  arr.forEach((item, index)=> {
    // 給每一個元素添加過渡延遲屬性
    // 讓每一個字都比前一個字延時0.2秒的時間
    item.style.transitionDelay=`${index * 0.2}s`
    // 將透明度設置為不透明
    item.style.opacity=1
  })
}, 1)

至此，已經完成了逐字顯示的效果，最后介紹一個css屬性

writing-mode

使用這個屬性可以改變文字方向，實現縱向從左往右或從右往左顯示

以下摘自mdn文檔

writing-mode

術的發展很難阻擋，但風險也同樣不可忽視。

視頻化的趨勢已經勢不可擋了。從創作者群體到觀眾觀看習慣都在進行著轉移，各種便攜拍攝設備出現，手機更是集拍攝、后期、分發為一體。剪輯 App 一天比一天強大，不僅支持多軌道，還具備很多專業軟件沒有的自動加字幕、自動卡點等功能。

最近，剪映推出了一個「圖文成片」的功能，可以將文字內容直接轉化成帶配音、畫面的視頻，這是減輕了創作者負擔，還是助推了營銷號產量？

做視頻的難度，降到了最低

我嘗試用這個功能將之前寫過的一些文章轉成視頻。目前它僅支持復制頭條號鏈接，應該是為了避免版權風險，你也可以直接輸入文字內容。剪映將字數限制在了 1500 字，標題 25 字以內，我以最多字數測試，所用時長大概在 1 分鐘左右。

原文章：蘋果之外，我們會看到什么樣的 ARM PC？

剪映「圖文成片」生成的視頻：https://v.qq.com/x/page/x32417snf6d.html

「圖文成片」生成的視頻有配樂、有配音（帶字幕）、有畫面。我試了一下輸入不同類型的文字，比如散文，配樂風格是會根據內容來變化的。配音是機器生成，可以在設置里改變音色，選擇不少，但整體還是偏機械。

畫面的話主要是靜態圖片，個別地方有動圖、表情包。斷句、卡點做得不錯，但圖片素材和文字內容的匹配度還有待加強。比如這里的蘋果，根據整體內容應該不難判斷出是指 Apple 公司。素材庫的時效性也有待加強，一些新品評測的內容匹配的都是舊型號。

以上我們測試的主要是科技、數碼類文章，評價也是基于直接生成的版本。實際上它提供的是一個工程文件，你可以在此基礎上進一步對配樂、配音（音色）、字幕、畫面素材進行修改。

數量上來了，質量呢？

從創作效率的角度，剪映的「圖文成片」已經很強大。未來也許在的文章頂部就會有「以視頻形式觀看」的按鈕，就像現在的文字轉語音一樣。

想要「有內容」的視頻。在的創作者收益中，豎版小視頻沒有收益，而橫版視頻是有的。根據我個人觀察，同樣話題的視頻內容比圖文要更容易傳播，這可能和人們觀看內容的習慣有關，也或許是平臺的推薦機制就有傾向。

類似的功能不止字節跳動（剪映）在做，知乎之前也推出過「圖文轉視頻」的功能。雙方平臺類型不一樣，但目的接近，那就是在視頻內容盛行的大環境下，盡量為創作者降低創作難度，以豐富平臺上的視頻數量。

從目前狀態看，用這個功能生成一些評論、資訊類文章是沒問題的，算是達到了基本的觀看標準，但它根本沒什么觀賞性。

營銷號狂喜，但版權如何界定？

體驗過后我的第一個想法是，這不是讓營銷號更容易生成垃圾視頻了嗎？其實現在各個平臺，不管是 YouTube 還是 B 站，就已經有大量這類低質內容。它們大多時長偏短，要么緊跟時事熱點，要么就刻意找容易引戰、引起共鳴的話題。內容本身極其的水，于是就要在標題、封面上吸人眼球。大量這樣的內容的確能給平臺帶來短期數據上的增長，但長遠來看對生態是有害的。

另一個不得不關注的問題就是版權。前段時間「知識類視頻」大火，平臺瘋狂爭奪頭部資源，也有不少創作者看到機會，大量制作「所謂的」知識類視頻。有些文章本身質量不高，或者根本不適合視頻化呈現，但只要加上畫面流量就暴增。有人炒冷飯，直接把舊文章用粗劣的剪輯做成視頻，收割名利，更有甚者是拿別人的文章拼湊。

這種侵犯版權的視頻很難甄別。現在各大平臺的機器審查，最多做到識別同樣視頻源的內容。如果是把別人的圖文轉成視頻，那已經是改頭換面，更別說把多篇文章縫縫補補的「視頻裁縫」，這種視頻靠人力甄別難度都很高。除非是「巫師財經」這樣的頭部賬號，否則大量的普通賬號即使有侵權，也很少被關注到。

工具好壞，是由使用者決定的

低質內容換成視頻依舊是低質的，它不會對真正優秀的頭部內容產生影響，甚至會讓其更有價值。之前微信公眾號、自媒體興起，有人就說「紙媒要亡」，但實際上如果轉型成功，好的內容品牌會更上一層樓，比如 GQ 就是很好的例子。不少領域一些新的自媒體賬號，如果你去了解一下他們的創始團隊，會發現很多都是來自傳統媒體，比如游研社、之前的好奇心日報。

有人說抖音式的豎屏短視頻興起，會對深度長內容造成沖擊，但其實 B 站的出圈就是在其之后才爆發。

工具終究是工具，關鍵看用的人如何。你完全可以用自動化的「圖文轉視頻」工具進行粗剪，然后再精細化剪輯，機器所配的畫面也許還能啟發創作者的思路。就像臭名昭著的 Deepfake，在電影中也有類似技術還原已故演員的形象。

技術的發展很難阻擋，但風險也同樣不可忽視。很多技術的初衷并不是出于「毀滅」，但如何規范使用技術，這是人類永恒的話題。

封面來源：《無間道》官方劇照

本文作者：劉丟丟

本文首發于極客之選，轉載請聯系極客君（ID：geekparker）。

更多閱讀：

把任意移動設備變成電腦外接屏幕，這個軟件可以幫你做到