はじめに
こんな感じのを実現するためのコードです。
コード
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>流れる単語</title><linkrel="stylesheet"href="./index.css"/></head><body><divclass="color-area"><divclass="scroll-string scroll-string-white">流れる単語</div></div><divclass="scroll-string scroll-string-blue">流れる単語</div></body></html>index.css
html{height:100%;}body{height:100%;}.color-area{width:100%;height:200px;top:100px;position:relative;overflow:hidden;background-color:darkblue;z-index:2;}.scroll-string{font-size:30px;visibility:hidden;text-align:center;height:50px;width:100%;position:absolute;left:0;right:0;margin:auto;}.scroll-string-white{color:white;top:0;animation:scroll-white5slinear0s1forwards;-webkit-animation:scroll-white5slinear0s1forwards;z-index:3;}.scroll-string-blue{color:darkblue;top:100;animation:scroll-blue5slinear0s1forwards;-webkit-animation:scroll-blue5slinear0s1forwards;z-index:1;}@keyframesscroll-white{0%{transform:translateY(-100px);visibility:visible;}100%{transform:translateY(300px);}}@keyframesscroll-blue{0%{transform:translateY(-200px);visibility:visible;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{opacity:0;transform:translateY(200px);}}ポイント
白い文字と青い文字を重ねて同時にアニメーションさせています。レイヤー構造は上から順に
- 白い文字
- 青い背景
- 青い文字
- 白い背景
となっています。その際、青い背景をoverflow: hiddenとすることで白い文字を青い背景の上のみで表示させます。
おわりに
もっと効率的の良い書き方があるかもしれません。