iT邦幫忙

2021 iThome 鐵人賽

DAY 4
1
Modern Web

這個網站也太嗨!30 個網頁動態提案系列 第 5

#3-打字特效炫起來!(CSS Animation)

昨天的第三個按鈕動態提案:文章傳送門
http://www.giphy.com/gifs/5oqa7m0GRsSi8wNQgn

使用了CSS動態的動態的主菜——Animation
其實有很多特效,只要能夠拆解他的原理,就可以使用Animation達成~

譬如說今天完成的打字/換字特效,乍看好像需要JS才能做到
(等到動畫跑完再換文字?還是把三層文字疊在一起?)
但其實只要CSS就可以做到了!

http://www.giphy.com/gifs/cXAe85UQ9AjPM5Kw8b

今天主要是跟著這個影片實作的。
在看code之前小小筆記一下CSS的動畫~


CSS 動畫比較不吃效能

CSS 架構的動畫通常是由瀏覽器「主執行緒」的另一獨立執行緒處理;
代表如果瀏覽器在主執行緒上執行某一些高成本任務,CSS 架構的動畫可能會一直運作,而不被中斷。

來源

所以其實可以使用CSS就達成的動態,何樂不為呢?

其實這個動態的組成就是這樣而已:

https://ithelp.ithome.com.tw/upload/images/20210918/20140247ICqO18np9o.png

三個部分

  • 靜態的文字(I will help you)
  • 動態的文字包(裡面有三段敘述)
  • 把靜態動態包起來的容器!

處理:

  • 固定容器長寬:不需要的就overflow: hidden,讓畫面看起來只有一行字
  • 打字效果:動態文字每一段都做一個偽元素,是一個黑框框,蓋住字,會一直往右移動,讓文字一點一點出現
  • 換字效果:讓文字每出現一行之後就往上移動一個單位,就會產生換字效果了~

直接看code &裡面的敘述解釋吧:


上code!

//html
<div class="container">
  <div class="static-text">I will help you </div>
  <div class="dynamic-text-wrapper">
    <div class="dynamic-text">expand your business</div>
    <div class="dynamic-text">find the right customer</div>
    <div class="dynamic-text">level up your brand</div>
  </div>
</div>

//scss
//處理-1:容器和靜態文字的部分 
.container{
  display: flex;
  height: 50px; //
  width: 900px; //這邊我有對最長文字的寬
  overflow: hidden; //把其他不需要的地方隱藏
  position: relative;
}

.static-text{
  white-space: nowrap;//文字讓他不要換行
}

//處理-2:打字效果
.dynamic-text{
  position: relative; //相對於偽元素而言
  height: 50px;
  margin-left: 10px;
  white-space: nowrap;
  font-weight: bold;
  color: #EDDE5D;

  &:before{
    content: '';
    position: absolute;
    border-left: solid 1px  #EDDE5D;
		//border-left 用來做會閃爍的打字線
    width: 100%;
    height: 100%;
    bottom: 0;
    left:0;
    background: black; //偽元素就是一塊黑黑的傢伙把其他字遮起來~
    animation: typewriter 4s steps(23) infinite, 
blink 0.5s steps(23) infinite, 
		//animation一次可以放很多個
		//animation的step就是將想要的效果拆解成幾步驟的意思
		//這邊以最長的文字長度23拆解出來~
		//typewriter 效果就是一直讓黑黑的遮布往右邊移動
		//blink 效果就是讓打字的線|一直閃爍
		
  }
}

@keyframes typewriter{
  40%, 60%{
    left: 100%;
  }
	//40%~60% 讓字固定在最長的長度
  100%{
    left: 0;
  }
	//100% 再讓所有字消失,好像有人在把字刪掉的感覺~
}

@keyframes blink{
  from{border-left: solid 1px  #EDDE5D;}
  to{border-left: solid 1px  transparent;}
}

//處理-3:換字效果

.dynamic-text-wrapper{
  position: relative; //因為要移動
  top: 0px;
  animation: moveup 12s steps(3) infinite,
	//每一行打字設定是4s所以3s需要花費 4*3 =12秒時間移到最後一行
	//因為3行所以這個動畫花steps(3)次解決~
}

@keyframes moveup{
  0%{top:0;}
  100%{top: -150px;}
	//每行高度是50px,要讓最後一行出現就是50px*3行=150px囉~
}

以上!

第一次看到可以換字效果覺得好炫~網路上查了之後才發現只要CSS就可以做到了!
真的是只要有想像力和拆解能力就可以做到很多效果呢~

今天的code 放這裡~

有任何錯誤或意見請批評指教
/images/emoticon/emoticon37.gif


上一篇
#2 - Button文字換起來! (CSS: 移動位置)
下一篇
#4-圖片資訊藏起來!(Hover圖片&CSS Filter, Rotation)
系列文
這個網站也太嗨!30 個網頁動態提案33

1 則留言

0
Felix
iT邦新手 4 級 ‧ 2021-09-19 15:23:11

個人覺得用偽元素的 content 比較自然。

liawyudye iT邦新手 5 級 ‧ 2021-09-20 14:41:47 檢舉

嗯嗯!偽元素也是很棒的寫法!

我要留言

立即登入留言