【PR】を含みます。

フロントエンド

【CSS】animationを使って流れるテキストを実装する方法

CSS animationを使って流れるテキストを実装する方法

CSSのanimationを使って流れるテキストを実装する方法を紹介します。

テキストの長さやコンテンツ幅によって、animationのスピードを調整する必要があります。

記事後半では、JavaScriptを使用してanimationのスピードを調整する方法も紹介しています。

CSSで左から右にテキストを流す

サンプル

テキスト

実装コード

テキストの長さやコンテンツ幅に合わせてanimation-duration: 10s;部分を調整して、アニメーションのスピードを調整してください。

HTML
Copy
  1. <div class="horizontalFlowing">
  2.   <div class="horizontalFlowing_content -left-to-right">テキスト</div>
  3. </div>
CSS
Copy
  1. .horizontalFlowing {
  2.   padding: 15px 0;
  3.   display: flex;
  4.   align-items: center;
  5.   overflow: hidden;
  6.   background: #f9e1de;
  7. }
  9. .horizontalFlowing_content.-left-to-right {
  10.   display: inline-block;
  11.   padding-left: 100%;
  12.   white-space: nowrap;
  13.   animation-name: flows-from-left-to-right;
  14.   animation-duration: 10s; /* アニメーションのスピード */
  15.   animation-iteration-count: infinite;
  16.   animation-timing-function: linear;
  17.   animation-delay: 0s;
  18.   animation-fill-mode: both;
  19. }
  21. @keyframes flows-from-left-to-right {
  22.   from {
  23.     transform: translateX(-100%);
  24.   }
  25.   to {
  26.     transform: translateX(0);
  27.   }
  28. }

CSSで右から左にテキストを流す

サンプル

テキスト

実装コード

テキストの長さやコンテンツ幅に合わせてanimation-duration: 10s;部分を調整して、アニメーションのスピードを調整してください。

HTML
Copy
  1. <div class="horizontalFlowing">
  2.   <div class="horizontalFlowing_content -right-to-left">テキスト</div>
  3. </div>
CSS
Copy
  1. .horizontalFlowing {
  2.   padding: 15px 0;
  3.   display: flex;
  4.   align-items: center;
  5.   overflow: hidden;
  6.   background: #f9e1de;
  7. }
  9. .horizontalFlowing_content.-right-to-left {
  10.   display: inline-block;
  11.   padding-left: 100%;
  12.   white-space: nowrap;
  13.   animation-name: flows-from-right-to-left;
  14.   animation-duration: 10s; /* アニメーションのスピード */
  15.   animation-iteration-count: infinite;
  16.   animation-timing-function: linear;
  17.   animation-delay: 0s;
  18.   animation-fill-mode: both;
  19. }
  21. @keyframes flows-from-right-to-left {
  22.   from {
  23.     transform: translateX(0);
  24.   }
  25.   to {
  26.     transform: translateX(-100%);
  27.   }
  28. }

CSSで上から下にテキストを流す

サンプル

テキスト

実装コード

.verticalFlowingと.verticalFlowing_contentのheightは、同じ値にする必要があります。

テキストの高さやコンテンツの高さに合わせてanimation-duration: 5s;部分を調整して、アニメーションのスピードを調整してください。

HTML
Copy
  1. <div class="verticalFlowing">
  2.   <div class="verticalFlowing_content -top-to-bottom">テキスト</div>
  3. </div>
CSS
Copy
  1. .verticalFlowing {
  2.   height: 200px;
  3.   text-align: center;
  4.   overflow: hidden;
  5.   background: #f9e1de;
  6. }
  8. .verticalFlowing_content.-top-to-bottom {
  9.   display: inline-block;
  10.   padding-top: 200px;
  11.   white-space: nowrap;
  12.   animation-name: flows-from-top-to-bottom;
  13.   animation-duration: 5s; /* アニメーションのスピード */
  14.   animation-iteration-count: infinite;
  15.   animation-timing-function: linear;
  16.   animation-delay: 0s;
  17.   animation-fill-mode: both;
  18. }
  20. @keyframes flows-from-top-to-bottom {
  21.   from {
  22.     transform: translateY(-100%);
  23.   }
  24.   to {
  25.     transform: translateY(0);
  26.   }
  27. }

CSSで下から上にテキストを流す

サンプル

テキスト

実装コード

.verticalFlowingと.verticalFlowing_contentのheightは、同じ値にする必要があります。

テキストの高さやコンテンツの高さに合わせてanimation-duration: 5s;部分を調整して、アニメーションのスピードを調整してください。

HTML
Copy
  1. <div class="verticalFlowing">
  2.   <div class="verticalFlowing_content -bottom-to-top">テキスト</div>
  3. </div>
CSS
Copy
  1. .verticalFlowing {
  2.   height: 200px;
  3.   text-align: center;
  4.   overflow: hidden;
  5.   background: #f9e1de;
  6. }
  8. .verticalFlowing_content.-bottom-to-top {
  9.   display: inline-block;
  10.   padding-top: 200px;
  11.   white-space: nowrap;
  12.   animation-name: flows-from-bottom-to-top;
  13.   animation-duration: 5s; /* アニメーションのスピード */
  14.   animation-iteration-count: infinite;
  15.   animation-timing-function: linear;
  16.   animation-delay: 0s;
  17.   animation-fill-mode: both;
  18. }
  20. @keyframes flows-from-bottom-to-top {
  21.   from {
  22.     transform: translateY(0);
  23.   }
  24.   to {
  25.     transform: translateY(-100%);
  26.   }
  27. }

CSSで無限に流れるテキスト

サンプル

テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

実装コード

コンテンツ幅に合わせて、テキストが途切れないように.horizontalFlowing_content-txtのdivタグの数を調整する必要があります。

要素が増えるとスピードが速くなるため、animation-duration: 10s;部分を修正して、アニメーションのスピードも調整が必要です。

HTML
Copy
  1. <div class="horizontalFlowing">
  2.   <div class="horizontalFlowing_content -loop-right-to-left">
  3.     <div class="horizontalFlowing_content-txt">テキスト</div>
  4.     <div class="horizontalFlowing_content-txt">テキスト</div>
  5.     <div class="horizontalFlowing_content-txt">テキスト</div>
  6.     <div class="horizontalFlowing_content-txt">テキスト</div>
  7.     <div class="horizontalFlowing_content-txt">テキスト</div>
  8.     <div class="horizontalFlowing_content-txt">テキスト</div>
  9.     <div class="horizontalFlowing_content-txt">テキスト</div>
  10.     <div class="horizontalFlowing_content-txt">テキスト</div>
  11.     <div class="horizontalFlowing_content-txt">テキスト</div>
  12.   </div>
  13.   <div class="horizontalFlowing_content -loop-right-to-left">
  14.     <div class="horizontalFlowing_content-txt">テキスト</div>
  15.     <div class="horizontalFlowing_content-txt">テキスト</div>
  16.     <div class="horizontalFlowing_content-txt">テキスト</div>
  17.     <div class="horizontalFlowing_content-txt">テキスト</div>
  18.     <div class="horizontalFlowing_content-txt">テキスト</div>
  19.     <div class="horizontalFlowing_content-txt">テキスト</div>
  20.     <div class="horizontalFlowing_content-txt">テキスト</div>
  21.     <div class="horizontalFlowing_content-txt">テキスト</div>
  22.     <div class="horizontalFlowing_content-txt">テキスト</div>
  23.   </div>
  24. </div>
CSS
Copy
  1. .horizontalFlowing {
  2.   padding: 15px 0;
  3.   display: flex;
  4.   align-items: center;
  5.   overflow: hidden;
  6.   background: #f9e1de;
  7. }
  9. .horizontalFlowing_content.-loop-right-to-left {
  10.   white-space: nowrap;
  11.   animation-name: loop-right-to-left;
  12.   animation-duration: 10s; /* アニメーションのスピード */
  13.   animation-iteration-count: infinite;
  14.   animation-timing-function: linear;
  15.   animation-delay: 0s;
  16.   animation-fill-mode: both;
  17. }
  19. .horizontalFlowing_content-txt {
  20.   padding: 0 20px;
  21.   display: inline-block;
  22. }
  24. @keyframes loop-right-to-left {
  25.   from {
  26.     transform: translateX(0);
  27.   }
  28.   to {
  29.     transform: translateX(-100%);
  30.   }
  31. }

CSSのanimationをホバー時に停止

サンプル

テキスト

実装コード

HTML
Copy
  1. <div class="horizontalFlowing -stop-hover">
  2.   <div class="horizontalFlowing_content -left-to-right">テキスト</div>
  3. </div>
CSS
Copy
  1. .horizontalFlowing {
  2.   padding: 15px 0;
  3.   display: flex;
  4.   align-items: center;
  5.   overflow: hidden;
  6.   background: #f9e1de;
  7. }
  9. .horizontalFlowing.-stop-hover:hover .horizontalFlowing_content {
  10.   animation-play-state: paused;
  11. }
  13. .horizontalFlowing_content.-left-to-right {
  14.   display: inline-block;
  15.   padding-left: 100%;
  16.   white-space: nowrap;
  17.   animation-name: flows-from-left-to-right;
  18.   animation-duration: 10s; /* アニメーションのスピード */
  19.   animation-iteration-count: infinite;
  20.   animation-timing-function: linear;
  21.   animation-delay: 0s;
  22.   animation-fill-mode: both;
  23. }
  25. @keyframes flows-from-left-to-right {
  26.   from {
  27.     transform: translateX(-100%);
  28.   }
  29.   to {
  30.     transform: translateX(0);
  31.   }
  32. }

JavaScriptでコンテンツサイズが変わってもanimationをスピードを一定にする

サンプル

テキスト

実装コード

以下の実装コードでは、1秒で180px移動するようになっています。

必要に応じて180部分を適宜変更してください。

HTML
Copy
  1. <div class="horizontalFlowing js-flowing">
  2.   <div class="horizontalFlowing_content -left-to-right js-flowing-content">テキスト</div>
  3. </div>
CSS
Copy
  1. .horizontalFlowing {
  2.   padding: 15px 0;
  3.   display: flex;
  4.   align-items: center;
  5.   overflow: hidden;
  6.   background: #f9e1de;
  7. }
  9. .horizontalFlowing.-stop-hover:hover .horizontalFlowing_content {
  10.   animation-play-state: paused;
  11. }
  13. .horizontalFlowing_content.-left-to-right {
  14.   display: inline-block;
  15.   padding-left: 100%;
  16.   white-space: nowrap;
  17.   animation-name: flows-from-left-to-right;
  18.   animation-iteration-count: infinite;
  19.   animation-timing-function: linear;
  20.   animation-delay: 0s;
  21.   animation-fill-mode: both;
  22. }
  24. @keyframes flows-from-left-to-right {
  25.   from {
  26.     transform: translateX(-100%);
  27.   }
  28.   to {
  29.     transform: translateX(0);
  30.   }
  31. }
JavaSctipt
Copy
  1. // animationのスピード調整
  2. function adjustAnimationSpeed() {
  3.   let flowingContainer = document.querySelector('.js-flowing');
  4.   let flowingContent = document.querySelector('.js-flowing-content');
  5.   let flowingContainerWidth = flowingContainer.offsetWidth;
  6.   let flowingContentWidth = flowingContent.offsetWidth;
  7.   let totalWidth = flowingContainerWidth + flowingContentWidth;
  8.   let speed = totalWidth / 180; // 例として1 秒で180px移動します
  9.   flowingContent.style.animationDuration = speed + 's';
  10. }
  12. // DOM読み込み後に実行
  13. document.addEventListener('DOMContentLoaded', adjustAnimationSpeed);
  15. // 画面サイズが変更された時に実行
  16. window.addEventListener('resize', adjustAnimationSpeed);

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-フロントエンド
-