Home >Web Front-end >CSS Tutorial >How to achieve the scrolling effect of CSS text from right to left? (code example)

How to achieve the scrolling effect of CSS text from right to left? (code example)

藏色散人Original: 2018-08-13 14:33:1015667browse

This article mainly introduces how to write the HTML text scrolling code effect for web pages? When we browse the news playback page, we will always see a piece of real-time news scrolling at the bottom. This effect can usually be accomplished by js or css. Let me introduce two methods in detail below.

1. Specific examples of js text scrolling code:

HTML code:

<!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>

The above text scrolling js Comments on relevant knowledge points in the code:

var direction means 1 means entering from the left, 2 means entering from the right;

speed means the smaller the value, the faster the speed

var textMove, define the initial position of the text

obj.css() Define animation

How to achieve the scrolling effect of CSS text from right to left? (code example) ##animate() method executes CSS properties Set of custom animations.

This method changes an element from one state to another through CSS styles. CSS property values change gradually, allowing you to create animated effects. Only numeric values can be animated (e.g. "margin:30px"). String values cannot be animated (such as "background-color:red").

2. CSS text scrolling code example in div:

  <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>

Related knowledge points notes:

You can create animations through @keyframes rules . The principle is to gradually change one set of CSS styles into another. You can change this set of CSS styles multiple times during the animation. Specifies when the change occurs as a percentage, or via the keywords "from" and "to", which are equivalent to 0% and 100%. 0% is the start time of the animation, 100% is the end time of the animation. For best browser support, you should always define 0% and 100% selectors.

animationname Required. Defines the name of the animation.

keyframes-selector Required. The percentage of animation duration.

Legal values: 0-100% from (same as 0%) to (same as 100%)

css-styles Required. One or more legal CSS style properties.

The above is an introduction to the methods of CSS scrolling effect, text horizontal scrolling and JS text scrolling. I hope it will be helpful to friends in need.

【Recommended related articles】

Example code for making scrolling text in HTML

10 lines of JS simple method to achieve seamless scrolling of text

htmlHow to use marquee to realize left and right scrolling of text

JS to realize intermittent circular scrolling of text

The above is the detailed content of How to achieve the scrolling effect of CSS text from right to left? (code example). For more information, please follow other related articles on the PHP Chinese website!

css html 字符串循环 var JS 选择器 margin background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of css3D+ animation (complete code attached)Next article：Example of css3D+ animation (complete code attached)

See more

How to achieve the scrolling effect of CSS text from right to left? (code example)

Related articles