網頁動畫實驗室#1 — 文字動畫滑入 - Medium

課名叫：網頁動畫與互動程式入門-HTML/CSS/JS/Sass/Pug 一方面是自我學習 ... 的文字滑入特效，覺得很漂亮，就開始思考要怎麼完成這樣的動畫效果呢？ GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite網頁動畫實驗室#1—文字動畫滑入案例解析DASH-creativeagencyhongkongDASHisaHongKongbasedcreativeagencyfoundedin2005.Wecuratecompellingcontentsandcreateengagingdesigns…www.dash.com.hk之前寫網頁開發一陣子了，但一直沒有機會專研設計、動畫。

最近開始想往這方式多嘗試，剛好看到Dash官網進入畫面的文字滑入特效，覺得很漂亮，就開始思考要怎麼完成這樣的動畫效果呢？https://www.dash.com.hk/這個案子，他延遲的動畫做得很漂亮，搭配切字延遲滑入，就可以完成這樣的動畫效果。

第一個步驟—將文字拆成不同的span首先第一步，我們要先將文字拆成不同的元素，才能去控制動畫。

因為每個字要分別滑進來，所以我們要把每個字分別變成獨立的span。

在這裡我們希望用最簡單的html內容套進去就好，給他一個class，讓CSS3處理動畫的部分好想看到未來

這邊有個地方需要特別注意，換行一直是html很麻煩的地方，我們這先採用直接換行，然後在slideLeftIn裡設置：white-space:pre-line，讓換行可以生效。

接下來我們要用到js來把這一行每個字拆開成不同的spanvartitleEls=document.querySelectorAll(".slideLeftIn")titleEls.forEach(el=>{el.innerHTML=el.innerText.split("").map(l=>l==="\n"?`
`:`${l}`).join("")})第二個步驟—製作文字滑入的效果接下來我們要製作讓文字左側劃入的效果。

這裡會用到CSS3的transform。

首先，先讓每個span作移到螢幕外面spandisplay:inline-blocktransform:translateX(-1200px)transition:0s接下來，再啟動網頁時，透過javascript將其加上active的class，讓span們移動到螢幕中央&.activespandisplay:inline-blocktransform:translateX(0px)transition:0.8s第三個步驟—文字滑入延遲特效每個文字要照順序滑入，這裡我們透過Sass將每個字的動畫間隔設成0.3秒&.activespan@for$ifrom1through100&:nth-of-type(#{$i})transition-delay:#{$i*0.3s}display:inline-blocktransform:translateX(0px)transition:0.8s接下來要調整文字滑入的速度感，這裡我們會用到貝茲曲線。

貝茲曲線的直要稍微調一下，才會有延遲滑入的美感。

&.activespan@for$ifrom1through100&:nth-of-type(#{$i})transition-delay:#{$i*0.3s}display:inline-blocktransform:translateX(0px)transition:0.8scubic-bezier(0,.54,0,.75)完成啦！這個案子，最大的挑戰在延遲的速度感，如果沒有抓好的話，其實看起來沒那個好感。

調整得好，才會有文字疊加的那種感覺喔！參考資料：這次的拆解來源：www.dash.com.hk範例連結：https://codepen.io/frank890417/pen/dyPbgWW?editors=0011CSStransitioncurve曲線網站：https://easings.net/#線下課程我暑假會在台大資工的系統訓練班，開一堂教網頁設計的課，上課時間是7/20開始14晚上，為期五週。

課名叫：網頁動畫與互動程式入門-HTML/CSS/JS/Sass/Pug一方面是自我學習跟成長，另一方面是分享自己所學歡迎大家報名：https://train.csie.ntu.edu.tw/train/course.php?id=2977--MorefromYiYaoHuangFollowMyinterestisdevelopinggoodtoolstohelppeopleinspiretheircreativity.Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedYiYaoHuang123FollowersMyinterestisdevelopinggoodtoolstohelppeopleinspiretheircreativity.FollowMorefromMediumUnbrokenBadgerAreyouoverwhelmed?SoamI.AdemitopeIbrahimGratitudeoverattitudeAtiggnaAboutcollegeBoniManaliliBrokenHallelujahHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable