CSS テキストの右から左へのスクロール効果を実現するにはどうすればよいですか? (コード例)-CSSチュートリアル-php.cn

CSS テキストの右から左へのスクロール効果を実現するにはどうすればよいですか? (コード例)

藏色散人

リリース： 2018-08-13 14:33:10

オリジナル

15669 人が閲覧しました

この記事では主にWebページのHTMLテキストスクロールコードエフェクトの書き方を紹介します。ニュース再生ページを閲覧すると、常に下部にリアルタイムニュースがスクロールして表示されます。この効果は通常、js または css によって実現されます。以下に 2 つの方法を詳しく紹介します。

1. js テキストスクロールコードの具体例:

HTML コード:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
</head>
<body>
<div class="container">
    <p class="text">文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css</p>
</div>
</body>
</html>

ログイン後にコピー

<script>
  var $container = $(&#39;.container&#39;),
    $text = $(&#39;.text&#39;);  var direction = 1, 
    speed = 3000; 
  var textMove = function (obj, container, direction, speed) {
    var initMarginLeft = &#39;-&#39; + obj.width() + &#39;px&#39;;
    obj.css({"margin-left": initMarginLeft});  
    var move = function () {
      var allDistance = obj.width() + container.width(),
        remainedDistance = container.width() - parseInt(obj.css(&#39;margin-left&#39;)),
        currentSpeed = (speed * remainedDistance ) / allDistance;      // 移动效果
      obj.animate({"margin-left": container.width() + &#39;px&#39;}, currentSpeed, &#39;linear&#39;, function () {
        obj.stop(true, true);
        obj.css({"margin-left": initMarginLeft});
        move();
      });
    };
    move();   
    container.on("mouseenter", function () {obj.stop(true)})
      .on(&#39;mouseleave&#39;, function () {move()})
  };
  textMove($text, $container, direction, speed);</script>

ログイン後にコピー

上記のテキストスクロール js コードの関連する知識点についてのメモ:

var 方向は 1 を意味します。は左から入力、2は右から入力を意味します。

speedは値が小さいほど速度が速くなります

var textMoveはテキストの初期位置を定義します

obj.css()アニメーションを定義します

CSS テキストの右から左へのスクロール効果を実現するにはどうすればよいですか? (コード例) animate() メソッドの実行 CSS プロパティセットのカスタムアニメーション。

このメソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更します。 CSS プロパティ値は徐々に変化し、アニメーション効果を作成できます。アニメーション化できるのは数値のみです（例：「margin:30px」）。文字列値はアニメーション化できません（「background-color:red」など）。

2. div の CSS テキストスクロールコード例:

  <style type="text/css" rel="stylesheet">
    * {  margin: 0;  padding: 0;}
    .container { margin: 200px auto;  width: 500px;   height: 50px; line-height: 50px;border: 1px solid red;  overflow: hidden;    }
    .text {  position: relative;      display: inline-block;      white-space: nowrap;      /*animation:scroll 5s 0s linear infinite;*/
      animation-name: scroll;      animation-duration: 5s;      animation-delay: 0ms;      animation-timing-function: linear;      animation-iteration-count: infinite;      -webkit-animation-name: scroll;      -webkit-animation-delay: 0ms;      -webkit-animation-duration: 5s;      -webkit-animation-timing-function: linear;      -webkit-animation-iteration-count: infinite;      -moz-animation-name: scroll;      -moz-animation-delay: 0ms;      -moz-animation-duration: 5s;      -moz-animation-timing-function: linear;      -moz-animation-iteration-count: infinite;    }
    @-webkit-keyframes scroll {
      100% {  margin-left: 100%; }
    }    @-moz-keyframes scroll {
      100%  {  margin-left: 100%;}
    }    @-ms-keyframes scroll {
      100%  { margin-left: 100%;  }
    }    .text:hover { -webkit-animation-play-state: paused;  }
  </style>

ログイン後にコピー

関連する知識ポイントのメモ:

@keyframes ルールを通じてアニメーションを作成できます。原則は、CSS スタイルのセットを徐々に別のセットに変更することです。この CSS スタイルのセットは、アニメーション中に複数回変更できます。変更がいつ発生するかをパーセントで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。 0% はアニメーションの開始時間、100% はアニメーションの終了時間です。ブラウザーを最適にサポートするには、常に 0% および 100% セレクターを定義する必要があります。

アニメーション名は必須です。アニメーションの名前を定義します。

キーフレームセレクターは必須です。アニメーションの継続時間の割合。

有効な値: 0-100% (0% と同じ) ～ (100% と同じ)

css-styles 必須。 1 つ以上の有効な CSS スタイルプロパティ。

上記はCSSスクロール効果、テキスト水平スクロール、JSテキストスクロールの方法の紹介です。必要な友人に役立つことを願っています。

【おすすめ関連記事】

HTMLでスクロールテキストを作成するサンプルコード

10行のJSでテキストのシームレスなスクロールを実現する簡単な方法

マーキーを使ってテキストを左右にスクロールする方法HTML

JS実装でのテキスト断続的なスクロール

以上がCSS テキストの右から左へのスクロール効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。