こんにちは、@tacashionです。
レトロゲームの次はレトロホームページ
昔風のホームページをCSS3で作成する機会があったので、記録を兼ねて紹介したいと思います。
なつかしのmarquee要素
個人ホームページなどでよくあった、右から左に文字が流れる要素。
ブラウザによって動いたり動かなかったりしますが、HTML5で正式には廃止されています。
そこで、ブラウザ依存せず再現する方法がないか調べてみると、CSS3でのアニメーションを利用して再現する方法があったので、参考にしつつ実装しました。
サンプルページとHTML・CSS
表示サンプル
この懐かしい感じ
それでは、実装後のHTMLとCSSのコードを以下に記載します。
HTMLファイルにコピペすればすぐに確認できるようにCSSはヘッダーに記述しました。
marquee.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>marquee</title>
<link rel="stylesheet" href=“marquee.css" type="text/css" media="all">
<style type="text/css">
.welcomeTextWrapper {
background:aqua;
overflow:hidden;/* marquee:コンテンツ幅外で消えるように */
}
.welcomeTextWrapper .welcomeText {
display:inline-block;
padding-left:100%;/* marquee:画面外からスクロールするように */
white-space:nowrap;/* marquee:テキストが折り返さないように */
animation-name:maruquee;/* marquee:アニメーション設定のための名前を */
animation-timing-function:steps(200,end);/* marquee:カクカク感を調整 */
animation-duration:20s;/* marquee:スクロールにかける時間 */
animation-iteration-count:infinite;/* marquee:スクロールの繰り返し */
}
@keyframes maruquee {
0% { -webkit-transform: translate(0%);}/* marquee:右端からスクロール */
100% { -webkit-transform: translate(-100%);}/* marquee:左端へスクロール */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contents">
<div class="welcomeTextWrapper"><p class="welcomeText">tacashionのホームページへようこそ！</p></div>
</div>
<!--/#contents-->
</div>
<!--/#wrapper-->
</body>
</html>
ポイント：なめらか過ぎないスクロール
marquee風表現の工夫として、「なめらか過ぎない」アニメーションの実現のために、「animation-timing-function」を利用しています。
animation-timing-function:steps(200,end);/* marquee:カクカク感を調整 */
animation-duration:20s;/* marquee:スクロールにかける時間 */
画面の右端から左端まで、20秒間で200回かけて移動するよう指定することで、なんとなくレトロ感を思わせるカクカクした動きにしています。
注意点
今回、画面幅は成り行きで設定しているので、ウィンドウ幅が狭まるほど早く、なめらかな動きになります。
一定の動きにしたい場合は、コンテンツ幅を設定し、「animation-timing-function」と「animation-duration」を調整していく必要があります。
今後引き続き、レトロホームページを再現コードをいくつか紹介したいと思います！