html & css

【HTML&CSS】要素をスクロールさせるシンプルなコード【animation&@keyflame】

html-css-object-scroll-animation

コードの書き方が分からず、検索してやりたいことができそうなサイトを見つけたものの、コードが複雑で結局諦めてしまう、または理解するのにとても時間がかかってしまうことがあると思います。(私はよくあります。)
本シリーズでは、理解しやすいよう、出来るだけシンプルなコードを記載しています。
また、参考サイトとして、私がいくつかのサイトを検索した結果、わかりやすいサイトを選んで紹介させてもらっています。

目次

1.要素(文字列)をスクロールさせるコード

1-1.シンプルなコード

1-2.コードの説明

1-3.参考サイト

2.要素(文字列)をスクロールさせるコード(親要素外を非表示)

2-1.シンプルなコード

2-2.コードの説明

2-3.参考サイト

3.最後に

1.文字列をスクロールさせるコード

1-1.シンプルなコード

p要素のテキストをスクロールさせるコードです。

See the Pen
html-css-object-scroll-animation-01
by zaisube (@zaisube)
on CodePen.

1-2.コードの説明

説明は目安として、プロゲートの範囲外のものに限定しています。

CSS

コード animation: scrollAnime 5s linear infinite;
プロパティ animation
scrollAnime ルール名(次項の@keyflameのルール名)をscrollAnimeに指定
5s アニメーション1回の時間を5秒に設定
linear 変化速度を一定に設定
infinite 繰り返す回数を無限に設定
コード @keyframes scrollAnime {
0% {transform: translateX(100%)}
100% {transform: translateX(0)}
}
セレクタ @keyframes scrollAnime ルール名をscrollAnimeに設定
**% アニメーションが**%経過時点での状態を設定
transform 要素の変形を指定
translateX(100%) 要素の位置をX方向(右方向)に親要素幅の100%分移動した状態に設定
translateX(0) X方向に元の状態に設定

よって、このサンプルコードは、「スクロールする要素」を右方向に100%分移動した所を初期位置として、元の位置まで5秒で移動とするというアニメーションを無限に繰り返す事を示しています。

1-3.参考サイト

設定値のバリエーションなどは下記サイトを参照ください

○文字スクロール
https://webparts.cman.jp/string/scroll/
○animation
https://web-designer.cman.jp/css_ref/abc_list/animation/
○@keyflame
https://web-designer.cman.jp/css_ref/abc_list/keyframes/
○transform
https://web-designer.cman.jp/css_ref/abc_list/transform/

2.文字列をスクロールさせるコード(親要素外を非表示)

2-1.シンプルなコード

1-1-1のコードに対し、p要素をdiv要素で囲み、div要素外の領域を非表示にしたコードです。

See the Pen
html-css-object-scroll-animation-02
by zaisube (@zaisube)
on CodePen.

2-2.コードの説明

説明は目安として、プロゲートの範囲外のものに限定しています。
1-2.との差分の説明です。

CSS

コード overflow: hidden
プロパティ overflow
hidden div範囲外の子要素を非表示に設定
コード white-space: nowrap;
プロパティ white-space
nowrap 自動改行をしないように設定

2-3.参考サイト

設定値のバリエーションなどは下記サイトを参照ください

○over-flow
https://saruwakakun.com/html-css/basic/overflow
○white-space
https://saruwakakun.com/html-css/basic/white-space

3.最後に

分かりにく記述や、誤り等あれば、お問合せフォームTwitter等からご連絡いただけると幸いです。
また、本記事に無い疑問などもお待ちしています。

ABOUT ME
zaisube
自動車部品メーカーで設計業務をしています。 この100年に一度と言われる大変革期を機に、会社にぶら下がっているだけではダメだと、スキルを付けるべくプログラミング、ブログを始めました。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です