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

This article mainly introduces you to the page HTML text scrolling code effect how to write? When we browse the news broadcast page, we always see a section of the bottom of the real-time news scrolling, such as the effect can usually be JS or CSS to complete the operation. Here is a detailed introduction to the two ways,

One, JS text scrolling code specific examples:

HTML code:

<! DOCTYPE html>
<script>  var $container = $ ('. Container '),    $text = $ ('. text ');  var = 1, speed     = direction;   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;      Move effect      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>
The above text scrolling JS code in the relevant Knowledge points note:

var direction indicates that 1 is entered from the left and 2 is entered from the right;

Speed means that the smaller the number, the faster it gets.

var textmove, defining the initial position of the text

OBJ.CSS () Defining animations

The animate () method executes a custom animation of the CSS property set.

This method changes the element from one state to another through CSS styles. CSS property values are changed gradually so that you can create animation effects. Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red").

Second, CSS text in the DIV scroll code example:

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

By @keyframes rules, you can create animations. The principle is to gradually change a set of CSS styles to another set of styles. You can change this set of CSS styles several times during the animation process. The time at which the change occurs is specified as a percentage, or by the keyword "from" and "to", equivalent to 0% and 100%. 0% is the start time of the animation, and the end time of the 100% animation. For best browser support, you should always define the 0% and 100% selectors.

Animationname required. Defines the name of the animation.

Keyframes-selector required. The percentage of the animation duration.


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


Css-styles required. One or more valid CSS style attributes.

The above is about the CSS scrolling effect text horizontal scrolling and JS text scrolling method introduced, I hope to have the necessary friends to help.