『食いっぱぐれない』ためのスキル学習ブログ
> 初心者と学ぶ!実践Photoshop講座 <

更新情報などに!テキストがスライドしながら流れていくアニメーション

デモ

今回作ったのは電光掲示板風のテキストがスライドしながら流れていくアニメーションです。ヘッダー下などにつければ更新情報のお知らせやCTAなどに使えるかもしれません。

 

2番線、電車が参ります。危ないですので、黄色い線の内側に下がってお待ちください

 

コード

 

2番線、電車が参ります。危ないですので、黄色い線の内側に下がってお待ちください

 

HTML
<div class="osirase">
<p class="osirase-text">2番線、電車が参ります。危ないですので、黄色い線の内側に下がってお待ちください</p>
</div>
CSS
.osirase{
background:#111;/*カスタム*/
overflow:hidden;
padding:10px 0;
}

.osirase-text{
-webkit-animation-name:osirase;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:20s;/*カスタム*/
color:#ff0;/*カスタム*/
display:inline-block;
font-size:1em;
padding:0 0 0 100%;
white-space: nowrap;
}

@-webkit-keyframes osirase{
from{ -webkit-transform: translate(0); }
to{ -webkit-transform: translate(-150%); }
}
 

カスタム

・-webkit-animation-duration:20s;

20秒でアニメを表示する仕様になっています。文字数によってスライドの速さは可変します(どんな文字数でも20秒で終わるように設定されている)ので、早めたいときは「20s」の箇所を「10s」としたり、遅くしたいときには「30s」としましょう

 
早めたとき

2番線、電車が参ります。危ないですので、黄色い線の内側に下がってお待ちください

 
遅めたとき

2番線、電車が参ります。危ないですので、黄色い線の内側に下がってお待ちください

 


・background:#111;
・color:#ff0;

色の調整です。backgroundの方は背景色、colorの方は文字色です。

 
backgroundを#fff、colorを#000にしたパターン

2番線、電車が参ります。危ないですので、黄色い線の内側に下がってお待ちください

backgroundをグラデーション、colorを#fffにしたパターン

2番線、電車が参ります。危ないですので、黄色い線の内側に下がってお待ちください

 

やったー!僕にもできたー!

男の子

 

コメントを残す

メールアドレスが公開されることはありません。