「猫写真+短歌=にゃん歌」をたまに作っています。写真上に縦書きでにゃん歌を載せることが最近は多いのですが、ウェブ上で動くテキストだとどうかなと思いやってみました。というか、推しペン総選挙のマーキーが真似したかっただけです(キッパリ。
●マーキーアニメーション試行錯誤・その1
うーん、このような場合は、文字は動かない方がいいですね(苦笑)。三十一文字であることに気づきにくいので、気付いて欲しかったら止めた方がいいかも。
●マーキーアニメーション試行錯誤・その2
(2018/10/16追記:これだと画像がレスポンシブ対応されてないので、追って訂正します)
背景画像の真ん中でテキストを右から左へマーキーさせてみました。なお、だいたい真ん中にするために、.marquee-bk .innerでtopを40%にしています(以下のコードを参照)。こっちはもうちょっと練れば面白くなりそうな気が。試してみて気付いたのは、私は字が大きなマーキーが好きだということでした(笑)。
コードまとめ
切れ目なくテキストを表示させるためには、同じ文字列を複数個用意して複数回マーキーさせるのがポイントのようです。推しペン総選挙の動きを参考にして、ここでは3個同じ文字列を表示させていますが、横幅のサイズと文字列の長さを見て、短文の場合には3個ではなくもっと必要かもしれません。
そして、文字列を3個動かしているので、keyframesでX軸の移動距離を0%だったものを-33.33%移動させます。
なお、spanタグにclass=”fraze”と記述していますが、本来は不要で、spanだけでよいはずです。ワードプレス?(このブログの環境?)の場合に、spanだけだと、ビジュアルモードにするとspanが消されてしまったので、消されないために適当にクラスを設定しました。
その1のCSS
/* マーキー */ .marquee { height: 40px; overflow: hidden; position: relative; align-items: center; z-index:1; } .marquee .inner { font-size:20px; color:#000; display: inline-block; position: absolute; overflow: hidden; white-space: nowrap; -webkit-animation: marquee 7s linear infinite; animation: marquee 7s linear infinite; } .marquee .inner span .fraze { display:inline-block; width: 33.333%; } .marquee span:before{ content: " "; }
その1のHTML
<div class="marquee"> <div class="inner"> <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span> <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span> <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span> </div> </div>
keyframes(その1、その2共通)
@keyframes marquee { from { -webkit-transform: translate3D(0%, 0, 0); transform: translate3D(0%, 0, 0); } to { -webkit-transform: translate3D(-33.33%, 0, 0); transform: translate3D(-33.33%, 0, 0); } }
その2のCSS
/* マーキー backgroundあり*/ .marquee-bk { background: no-repeat url("背景画像ファイルのURL"); height: 554px; /* 画像サイズの高さと合わせる */ overflow: hidden; position: relative; align-items: center; z-index:1; } .marquee-bk .inner { font-size:80px; font-weight: 800; color:#FFF; display: inline-block; position: absolute; top: 40%; overflow: hidden; white-space: nowrap; -webkit-animation: marquee 7s linear infinite; animation: marquee 7s linear infinite; } .marquee-bk .inner span .fraze { display:inline-block; width: 33.333%; } .marquee-bk span:before{ content: " "; }
その2のHTML(最初のdivのクラスを、背景画像付きのものに変更しただけ)
<div class="marquee-bk"> <div class="inner"> <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span> <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span> <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span> </div> </div>
以下に推しペン総選挙について書きました。よろしければどうぞ。