文字をテロップのようにスクロールしたい場合は、CSS3で追加された「animetion」を利用すると、簡単にできます。文字のスクロール用に「MARQUEE」タグがありましたが、一部ブラウザしか対応していないため、HTML5で廃止されました。
当ページでは、簡単な操作で文字スクロールのCSSを自動で作成できます。「横スクロール」「縦スクロール」「折返し」に対応していますので、是非お試しください。
<div class="scroll">
<span>スクロールは簡単</span>
</div>
.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%)} }
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>
ブリンクの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>
文字回転の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>
CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。
「animation」の使い方は以下を参照ください。
animation 「アニメーション」
生成できるホームページ・パーツ一覧 | |
文字のデザイン | |
画像のデザイン | |
ボタンのデザイン | |
入力項目のデザイン | |
テーブルのデザイン | |
BOXのデザイン | |
吹き出しのデザイン | |
ページのデザイン | |
図形のデザイン | |
ご利用時の注意事項・制約事項 | |
よくあるご質問 | |
何で無料なの? | |
生成コードに利用制限はある? | |
生成コードに保証はある? | |
jQueryで生成できない? |
CSS背景文字
CSSブリンク
CSS改行位置
先頭文字
文字サイズ
影付け
インデント
言語切換え
CSS文字縁取り
SVG文字縁取り
画像文字重ね
NEW,UP
遠近・奥行
文字の回転
縦長・横長
スクロール
マウス選択色
斜体文字
文字の強調
縦書き
CSSで文書を縦書きにする
縦書き
スマートフォン・タブレット | 運営:株式会社シーマン |