transformとanimationと@keyframeを利用してCSSで滑らかなマーキーを作る
一時代前に流行ったような気がする文字のスクロール。当時は、今は懐かしきmarqueeタグを使っていましたね。PCサイトというよりケータイサイトで使用していたと思います。あの狭い表示領域には最良の表示方法でした。懐かしきスクロール機能ですが、transformと@keyframeを利用することによってCSS3でも実装できます。
スポンサーリンク
既知の事実ですが、marqueeタグ自体はHTML5からは非推奨になっています。
タグ自体は非推奨になりましたが、スクロールさせるという機能自体は良い表現方法だと思います。
文字が動くという機能だけでも閲覧者の目を奪うこともできますし。(動かしすぎは厳禁ですが…)
前述しましたが、CSS3ではtransformとanimationと@keyframeを使うことによって、スクロールの表現が可能です。
各タグの調整でスピードやアニメーションもある程度いじれます。そのため、使用する場所によって変化をつけるのもアリです。
1.テキストを滑らかにスクロールさせる
通常のスクロール。右から左に流すだけのタイプです。スクロールが終わったら右から再度表示されます。
<div class="bg_murquee"> <p class="animation1">テキストを滑らかにスクロールさせる。テキストを滑らかにスクロールさせる。</p> </div>
.bg_murquee {
background-color: #F2F2F2;
border: solid 1px #DDD;
border-radius: 3px;
width: 80%;
height: 40px;
overflow: hidden;
}
.bg_murquee p {
display: inline-block;
white-space: nowrap;
margin-bottom: 0;
line-height: 40px;
font-size: 90%;
transform:translateX(100%);
}
.animation1 {
animation: murquee1 20s linear infinite;
-moz-animation: murquee1 20s linear infinite;
-webkit-animation: murquee1 20s linear infinite;
}
@keyframes murquee1 {
0% {transform:translateX(100%);}
100% {transform:translateX(-100%);}
}
@-moz-keyframes murquee1 {
0% {-moz-transform:translateX(100%);}
100% {-moz-transform:translateX(-100%);}
}
@-webkit-keyframes murquee1 {
0% {-webkit-transform:translateX(100%);}
100% {-webkit-transform:translateX(-100%);}
}
HTMLはとてもシンプルです。流したい文字を特定のclass(animation1)で囲っているだけです。
CSSはスクロールさせるテキストの初期配置と、そこからのアニメーションを考えます。
1.transform:translateX(100%)を設定して、テキストを表示枠外に配置する。
2.animationを設定して、@keyframesを使用する準備と、@keyframesの秒数や変化のタイミング、ループを設定する。
3.animationで設定した秒数に対しての@keyframesの動きをを％で考える
ただテキストをスクロールさせているだけなので、基本形といったところでしょうか。
2.テキストが左までスクロールしたあと、スピードを変更して画面外へスクロールする
通常のスクロールに変化をつけたタイプ。右から左に流れいったん停止をし、その後ゆっくりと左に流れて消えていきます。1.と同様、スクロールが終わったら右から再度表示されます。
<div class="bg_murquee"> <p class="animation2">テキストが左までスクロールしたあと、スピードを変更して画面外へスクロールします。</p> </div>
.bg_murquee {
background-color: #F2F2F2;
border: solid 1px #DDD;
border-radius: 3px;
width: 80%;
height: 40px;
overflow: hidden;
}
.bg_murquee p {
display: inline-block;
white-space: nowrap;
margin-bottom: 0;
line-height: 40px;
font-size: 90%;
transform:translateX(100%);
}
.animation2 {
animation: murquee2 10s ease-in-out infinite;
-moz-animation: murquee2 10s ease-in-out infinite;
-webkit-animation: murquee2 10s ease-in-out infinite;
}
@keyframes murquee2 {
0% {transform:translateX(100%);}
10% {transform:translateX(0%);}
30% {transform:translateX(0%);}
100% {transform:translateX(-100%);}
}
@-moz-keyframes murquee2 {
0% {-moz-transform:translateX(100%);}
10% {-moz-transform:translateX(0%);}
30% {-moz-transform:translateX(0%);}
100% {-moz-transform:translateX(-100%);}
}
@-webkit-keyframes murquee2 {
0% {-webkit-transform:translateX(100%);}
10% {-webkit-transform:translateX(0%);}
30% {-webkit-transform:translateX(0%);}
100% {-webkit-transform:translateX(-100%);}
}
1.の応用です。
テキストが左までスクロールしたあと、スピードを変更して画面外へ消えます。
HTMLは1.と変わりはないです。流したい文字を特定のclass(animation2)で囲っているだけです。
CSSはanimationと@keyframesを調整しています。
animationで10秒と設定しているので、この10秒を@keyframesで％区切りで位置の調整をしています。
3.2つのテキストが入れ替わり、繰り返しスクロールする
1つ目のテキストが表示され、次に2つ目のテキストが入れ替わり表示されます。2つ目のテキストが消えると、再度1つ目のテキストが表示されます。
<div class="bg_murquee2"> <p>1つ目のテキストがスクロール中。1つ目のテキストがスクロールしています。</p> <p>2つ目のテキストがスクロール中。2つ目のテキストがスクロールしていマス。</p> </div>
.article_150314 .bg_murquee2 {
position: relative;
background-color: #F2F2F2;
border: solid 1px #DDD;
border-radius: 3px;
width: 80%;
height: 40px;
overflow: hidden;
}
.article_150314 .bg_murquee2 p {
position: absolute;
display: inline-block;
white-space: nowrap;
margin-bottom: 0;
line-height: 40px;
width: 100%;
font-size: 90%;
transform:translateX(100%);
}
.bg_murquee2 p:nth-child(1) {
animation: txt-one 20s ease infinite;
-moz-animation: txt-one 20s ease infinite;
-webkit-animation: txt-one 20s ease infinite;
}
.bg_murquee2 p:nth-child(2) {
animation: txt-two 20s ease infinite;
-moz-animation: txt-two 20s ease infinite;
-webkit-animation: txt-two 20s ease infinite;
}
@keyframes txt-one {
0% {transform:translateX(100%)}
10% {transform:translateX(0);}
40% {transform:translateX(0);}
50% {transform:translateX(-100%);}
100% {transform:translateX(-100%);}
}
@-moz-keyframes txt-one {
0% {-moz-transform:translateX(100%)}
10% {-moz-transform:translateX(0);}
40% {-moz-transform:translateX(0);}
50% {-moz-transform:translateX(-100%);}
100% {-moz-transform:translateX(-100%);}
}
@-webkit-keyframes txt-one {
0% {-webkit-transform:translateX(100%)}
10% {-webkit-transform:translateX(0);}
40% {-webkit-transform:translateX(0);}
50% {-webkit-transform:translateX(-100%);}
100% {-webkit-transform:translateX(-100%);}
}
@keyframes txt-two {
0% {transform:translateX(100%)}
50% {transform:translateX(100%);}
60% {transform:translateX(0);}
90% {transform:translateX(0)}
100% {transform:translateX(-100%)}
}
@-moz-keyframes txt-two {
0% {-moz-transform:translateX(100%)}
50% {-moz-transform:translateX(100%);}
60% {-moz-transform:translateX(0);}
90% {-moz-transform:translateX(0)}
100% {-moz-transform:translateX(-100%)}
}
@-webkit-keyframes txt-two {
0% {-webkit-transform:translateX(100%)}
50% {-webkit-transform:translateX(100%);}
60% {-webkit-transform:translateX(0);}
90% {-webkit-transform:translateX(0)}
100% {-webkit-transform:translateX(-100%)}
}
この場合は、テキストを表示させるタイミングが重要になります。
HTMLは表示させたいテキストを2行書いているだけなので、特に問題はないかなと思います。
CSSは表示させるテキストごとにanimationと@keyframesを設定しています。
animationは20秒と共通で設定して、この20秒を@keyframesで％区切りで位置の調整をしています。
txt-oneは1つ目に表示されるテキストなので、0％～50％で@keyframesを終わらせるように考えます。
txt-twoは2つ目に表示されるテキストなので、50％～100％で@keyframesを終わらせるように考えます。
おまけ.実用的な感じで作ってみた
最後におまけ的なものとして、実用的に使うのであればこのような形かなというものを作ってみました。
よくあるサイトのお知らせをスクロールさせるように作ってみました。
今回は右から左というスクロールで作りましたが、下から上へのスクロールも場合によっては面白いかなと思いました。
長くなりましたが、上記のように数パターン作りました。
作っていた中で、注意するところがいくつかありました。
流れる速度は文字数によって変わってしまうので注意が必要になります。
実際に流れる文字を確認しながら、必要に応じてanimation-durationの部分を調整するのがベターです。
また、よく見てみると気づかれてしまうのですが、実装するパターンによって基本的に共通で使用しているCSSの記述が若干異なるのですよ。
たとえば1の場合、pタグにdisplay:inline-blockをいれておかないと、最後が若干スクロールしきれないままスタートに戻ってしまうことがあったりとか。
たとえば3の場合、pタグにwidth:100%を入れておかないと、2つ目のスクロールするべきテキストの文字数が少なかったとき、表示領域内に入ってしまうとか。
まったく、何なんでしょう…？？
いろいろと自分なりの原因を考えたのですが、
1の場合は、pタグをinline-blockにしたら最後までスクロールしているので、ブロック要素が悪さをしているのでしょうか？？
3の場合は、pタグを囲っている要素に合わせて、pタグもwidthを100%指定をしてtransform:translateX(100%)で表示領域外に飛ばさないといけないのかもしれません。
ちなみにこっちはinline-blockにしようがblockにしようが、inlineにしても変化はありませんでした。
原因の説明ってこんなでいいのかな…
もやもやして大きくこれっといった理由が説明できなくて申し訳ない…
導入される際に困ったらこのあたりをいじってみると解決できるかもしれません。
Creating Advanced “Marquee” with CSS3 Animation
http://www.hongkiat.com/blog/css3-animation-advanced-marquee/