コードの書き方が分からず、検索してやりたいことができそうなサイトを見つけたものの、コードが複雑で結局諦めてしまう、または理解するのにとても時間がかかってしまうことがあると思います。(私はよくあります。)
本シリーズでは、理解しやすいよう、出来るだけシンプルなコードを記載しています。
また、参考サイトとして、私がいくつかのサイトを検索した結果、わかりやすいサイトを選んで紹介させてもらっています。
目次
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等からご連絡いただけると幸いです。
また、本記事に無い疑問などもお待ちしています。
