How to scroll text from right to left with css
This article mainly introduces the css how to achieve the text from right to left scrolling effect of the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this css how to achieve the text from right to left scrolling effect article will have a harvest, let's take a look.
1. Specific example of js text scrolling code:
HTML Code:
Text scrolling from right to left scrolling css text from right to left scrolling css
Var$container=$ ('.container')
$text=$ ('.text'); vardirection=1
Speed=3000
VartextMove=function (obj,container,direction,speed) {
VarinitMarginLeft='-'+obj.width () + 'px'
Obj.css ({"margin-left": initMarginLeft})
Varmove=function () {
VarallDistance=obj.width () + container.width ()
RemainedDistance=container.width ()-parseInt (obj.css ('margin-left'))
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)
The above text scrolls and notes on the relevant knowledge points in the js code:
In vardirection, 1 means to enter from the left and 2 to enter from the right
VartextMove, defining the initial position of the text
Obj.css () defines animation
The de947a0151aff9ef812f417615de182.pnganimate () method performs a custom animation of the CSS property set.
This method changes an element from one state to another through the CSS style. The value of the CSS property changes gradually so that you can create an animation effect. Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red").
2. Sample scrolling code for css text in div:
* {margin:0;padding:0;}
.container {margin:200pxauto;width:500px;height:50px;line-height:50px;border:1pxsolidred;overflow:hidden;}
.text {position:relative;display:inline-block;white-space:nowrap;/*animation:scroll5s0slinearinfinite;*/
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-keyframesscroll {
100% {margin-left:100%;}
} @-moz-keyframesscroll {
100% {margin-left:100%;}
} @-ms-keyframesscroll {
100% {margin-left:100%;}
} .text: hover {- webkit-animation-play-state:paused;}
Notes on relevant knowledge points:
With the @ keyframes rule, you can create an animation. The principle is to gradually change one set of CSS styles into another. You can change this CSS style many times during the animation process. Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which is equivalent to 0 and 100%. 0% is the start time of the animation and the end time of 100% of the animation. For optimal browser support, you should always define 0% and 100% selectors.
Animationname is required. Defines the name of the animation.
Keyframes-selector is required. The percentage of animation time.
Legal value: 0-100%from (same as 0%) to (same as 100%)
Css-styles is required. One or more legal CSS style properties.
This is the end of the article on "how css scrolls text from right to left". Thank you for reading! I believe you all have a certain understanding of "how to achieve the right-to-left scrolling effect of css". If you want to learn more, you are welcome to follow the industry information channel.
