CSSだけで文字を横からスクロールさせる方法（コピペOK！）

こんにちは。山田です。

今回は、javascriptを使わなくてもCSSだけで文字を横からスクロールさせる方法を紹介します。

動きのサンプルはこのサイトのヘッダーの部分に使われているので、demoページは用意しませんでした。(*´ω｀*)

※今現在はWeb制作は山田まで！と表示されています。

それでは以下に紹介していきます。

まずはHTMLを用意

以下のコードを貼り付けます。

ちなみにこのサイトはcocoonを使っていまして、このサイトのようにサイトの一番上に表示させたい場合は、外観→テーマエディタ→tmp-user→head-insert.phpに書き込みます。

<div class="scroll">
Web制作は山田まで！
</div>>

次にCSSをコピペ

次にスタイルシートに以下をコピペします。

.scroll {
margin: auto;
max-width: 100%;
font-size : 90%;
font-weight: bold;
line-height: 0.4em;
text-align : center;
border     : 1px solid #6997bf;
color      : #fff;
background :#6997bf;
overflow   : hidden;
}
.scroll span{
display     : inline-block;
padding-left: 100%;
white-space : nowrap;
line-height : 1.5em;
animation   : scrollAnime 20s linear infinite;
}
@keyframes scrollAnime{
	0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

こんな感じ♬。

お好みで文字が流れるスピードや、色を変えたりして楽しんでくださいね。