ホームページ > 記事 > ウェブフロントエンド > CSS テキストの右から左へのスクロール効果を実現するにはどうすればよいですか? (コード例)
CSS テキストの右から左へのスクロール効果を実現するにはどうすればよいですか? (コード例)
- 藏色散人オリジナル
- 2018-08-13 14:33:1015622ブラウズ
この記事では主に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 = $('.container'),
$text = $('.text'); var direction = 1,
speed = 3000;
var textMove = function (obj, container, direction, speed) {
var initMarginLeft = '-' + obj.width() + 'px';
obj.css({"margin-left": initMarginLeft});
var move = function () {
var allDistance = obj.width() + container.width(),
remainedDistance = container.width() - parseInt(obj.css('margin-left')),
currentSpeed = (speed * remainedDistance ) / allDistance; // 移动效果
obj.animate({"margin-left": container.width() + 'px'}, currentSpeed, 'linear', function () {
obj.stop(true, true);
obj.css({"margin-left": initMarginLeft});
move();
});
};
move();
container.on("mouseenter", function () {obj.stop(true)})
.on('mouseleave', function () {move()})
};
textMove($text, $container, direction, speed);</script>上記のテキスト スクロール js コードの関連する知識点についてのメモ:
var 方向は 1 を意味します。は左から入力、2は右から入力を意味します。
speedは値が小さいほど速度が速くなります
var textMoveはテキストの初期位置を定義します
obj.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テキストスクロールの方法の紹介です。必要な友人に役立つことを願っています。
【おすすめ関連記事】
10行のJSでテキストのシームレスなスクロールを実現する簡単な方法
以上がCSS テキストの右から左へのスクロール効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。