文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 文字をスクロールする

文字スクロールのCSS作成

文字をテロップのようにスクロールしたい場合は、CSS3で追加された「animetion」を利用すると、簡単にできます。文字のスクロール用に「MARQUEE」タグがありましたが、一部ブラウザしか対応していないため、HTML5で廃止されました。

当ページでは、簡単な操作で文字スクロールのCSSを自動で作成できます。「横スクロール」「縦スクロール」「折返し」に対応していますので、是非お試しください。

文字をスクロールさせ見よう

クロース速度
スクロールの動き
スクロールは簡単
使用したhtml
<div class="scroll">
  <span>スクロールは簡単</span>
</div>
生成したCSS
.scroll {
  margin     : auto;
  width      : 96%;
  font-size  : 140%;
  line-height: 1.5em;
  text-align : center;
  border     : 1px solid #666;
  color      : #000000;
  background : #fff;
  overflow   : hidden;
}
.scroll span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime 3s linear infinite;
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}
「animation」の使い方は以下を参照ください。
animation 「アニメーション」の構文
広告
広告
ページTOP

色々なスクロール

CSSの「animation」を使用することで、色々なスクロールを作成することができます。

色を変化しながらスクロール

変化割合と色を追加するだけで、簡単に多色スクロールが作成できます。

スクロールは簡単
<style type="text/css">
.scroll_s1 {
  margin     : auto;
  width      : 96%;
  font-size  : 140%;
  line-height: 1.5em;
  text-align : center;
  border     : 1px solid #666;
  color      : #000000;
  background : #fff;
  overflow   : hidden;
}
.scroll_s1 span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime_s1 3s linear infinite;
}
@keyframes scrollAnime_s1{
    0% { transform: translateX(0);    color : yellow}
   25% { transform: translateX(-25%); color : blue  }
   50% { transform: translateX(-50%); color : green }
   75% { transform: translateX(-75%); color : black }
  100% { transform: translateX(-100%);color : red   }
}
</style>
ページTOP

ブリンクしながらスクロール

ブリンクのCSS生成も行えます。以下をご確認ください。
blink 「ブリンク・点滅」 のCSS生成

ブリンクスクロール
<style type="text/css">
.scroll_s2 {
  margin     : auto;
  width      : 96%;
  font-size  : 140%;
  line-height: 1.5em;
  text-align : center;
  border     : 1px solid #666;
  color      : #000000;
  background : #fff;
  overflow   : hidden;
}
.scroll_s2 span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime_s2 3s linear infinite;
}
@keyframes scrollAnime_s2{
    0% { transform: translateX(0);    color: red  }
   20% { transform: translateX(-20%); color: white}
   40% { transform: translateX(-40%); color: red  }
   60% { transform: translateX(-60%); color: white}
   80% { transform: translateX(-80%); color: red  }
  100% { transform: translateX(-100%);color: white}
}
</style>
ページTOP

回転しながらスクロール

文字回転のCSS生成も行えます。以下をご確認ください。
文字回転のCSS生成

文字回転スクロール
<style type="text/css">
.scroll_s3 {
  margin     : auto;
  width      : 96%;
  font-size  : 140%;
  line-height: 1.5em;
  text-align : center;
  border     : 1px solid #666;
  color      : #000000;
  background : #fff;
  overflow   : hidden;
}
.scroll_s3 span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime_s3 3s linear infinite;
}
@keyframes scrollAnime_s3{
    0% { transform: translateX(0)     rotateX(360deg)}
   25% { transform: translateX(-25%)  rotateX(0deg)  }
   50% { transform: translateX(-50%)  rotateX(360deg)}
   75% { transform: translateX(-75%)  rotateX(0deg)  }
  100% { transform: translateX(-100%) rotateX(360deg)}
}
</style>
ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン