今天來介紹一個今年年初寫的一個小專案。

對哈利波特熟悉的人應該有聽過這本日記，它可以回應其他人在上面寫的字。寫在日記本上面的字會慢慢褪去，然後躲在日記背後的人會回應你。當初看到電影的時候對那個呈現的特效印象特別深刻，後來學習網頁前端技術之後，就想說也許有天可以把那個感覺呈現出來。但我目前還是沒辦法做出對話的感覺，除非真的有另一個人打字回應你才有可能。

但光是做出讓字經過一段時間消失的效果我就覺得蠻帥的了，現在想想這大概就是做前端會讓人有成就感的高光時刻吧

原理簡介：

主要是利用 CSS 的 animations 效果

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

div.fade-text {
  animation: fade-out 10s ease-in forwards;
}

首先我定義了 fade-out 的影格事件，然後我在 div.fade-text 底下宣告它的動畫屬性，使用定義好的 fade-out @keyframes 然後暫停 10 秒才開始播放，ease-in 是速度漸增，forwards 往前播放。

然後我用 javascript 將對應的 div 套上 fade-text class，它就會開始播放動畫特效，產生文字消失的效果。

如果想要在動畫播完之後做一些網頁操作的話，可以監聽 "animationend" 這個事件。

講那麼多沒有提供成品實在沒有感覺，所以附上最終作品，大家可以自己玩玩看，感受一下 :)

還有一些小彩蛋留在程式碼裡面，有興趣的話可以自己看看，今天就這樣囉，謝謝縮看