iT邦幫忙

2021 iThome 鐵人賽

DAY 7
1
Modern Web

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

#6-無限文字Logo跑馬燈 (不用JS! CSS Animation)

文字跑馬燈偶爾會在一些運動品牌或是潮牌看到,裝飾效果很棒又很炫,
以前也是傻傻以為要用JS寫,偵測跑完了再放下一段......
但在Youtube看到這個教學影片
發現,哇靠只要CSS的animation 就可以做到!!
大家都去這個頻道看酷炫效果就不用看我的鐵人30了

另外就是一些官網常常會放上一些合作品牌的Logo,
放不下了就會讓他用跑馬燈的方式進行,也可以用同樣的方式去做~
先來看看我的成果吧!

DJ風?或是很適合配嘻哈潮牌~
原理呢~就是做一個假的在要跑的東西的屁股後面,animation全部花40s

本尊從translateX(100%)跑到translateX(0%)
複製人從translateX(0)跑到translateX(-200%),並且讓他animation-delay: -20s
animation-delay是負值的話,畫面一開始的0秒,就會讓他好像已經跑了20秒的樣子~

上圖說明:
]


直接上部分code (logo的):

//html
<section>
   <div class="logo-wall">
		//本尊!
    <div class="logo-wrapper first">
      <div class="logo"><span>logo</span></div>
      <div class="logo"><span>logo</span></div>
      ...省略
    </div>
		//複製人!
    <div class="logo-wrapper second">
      <div class="logo"><span>logo</span></div>
      <div class="logo"><span>logo</span></div>
      ...省略
    </div>
  </div>
<section>

//scss
@keyframes scroll{
  from{transform: translateX(100%)}
  to{transform: translateX(-100%)}
}

@keyframes scroll2{
  from{transform: translateX(0%)}
  to{transform: translateX(-200%)}
}

.logo-wall{
  display: flex;

  .logo-wrapper{
    display: flex;
    animation: scroll 40s linear infinite;

    &:nth-child(2){
    animation: scroll2 40s linear infinite;
    animation-delay: -20s;
    }

    &.first>.logo:first-child{
      background: blue;
    }

    &.second>.logo:first-child{
      background: red;
    }
    .logo{
    width: 150px;
    height: 150px;
    margin: 0 10px;
    border-radius: 50%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    }
  }
}

以上!

今天的code

一樣有任何錯誤或是問題歡迎批評指教!
/images/emoticon/emoticon06.gif


上一篇
#5-中秋月亮暈起來!不規則Blob球球(CSS)
下一篇
#7-漢堡Menu動起來!(CSS就搞定啦!)
系列文
這個網站也太嗨!30 個網頁動態提案33

1 則留言

0
Mao
iT邦新手 2 級 ‧ 2021-09-22 17:11:47

這個 Youtuber 做的很多 CSS 真的會讓人眼睛一亮!
我就是看到他才愛上 CSS 的
/images/emoticon/emoticon24.gif

Rachel ? iT邦新手 5 級 ‧ 2021-09-23 15:55:22 檢舉

他真的很猛!是他讓我知道有些帥效果只要CSS就做得到!
只有想像力才是自己的局限呀!

我要留言

立即登入留言