Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use javascript to achieve text scrolling effect". In daily operation, I believe many people have doubts about how to use javascript to achieve text scrolling effect. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use javascript to achieve text scrolling effect". Next, please follow the editor to study!

This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.

How to use javascript to achieve text scrolling?

Js to achieve the effect of text scrolling

In the past, the editor has introduced some commonly used js animation effects. Here, I would like to introduce a kind of animation effects that may not be commonly used. The animation effect is related to text, and, although it is not commonly used, almost everyone has seen it.

I believe that everyone uses KuGou music or Netease cloud music for music search, listening to lessons, so long will see the effect of lyrics scrolling in the lyrics page. This animation effect is the same as it is, but somewhat different from these music lyrics, adding the effect of vertical arrangement and scrolling of the text.

Before the introduction, let's learn about some ways in which the text is arranged vertically:

Writing-mode attribute

1. Value:

(1) writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

(2) compatible writing method:-webkit-writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

(note: lr-tb and tb-rl are not compatible in IE)

Default value: normal

Applicable to all elements except table-row-group, table-column-group, table-row, table-column

Inheritance: yes

Animations: no

Calculated values: specific valu

2. Introduction to the value of writing-mode

(1) horizontal-tb: horizontal top-down writing. That is, left-right-top-bottom (similar to IE private value lr-tb)

(2) vertical-rl: writing from right to left in the vertical direction. That is, top-bottom-right-left (similar to IE private value tb-rl)

(3) vertical-lr: vertical writing from left to right. That is top-bottom-left-right

(4) lr-tb: left-right, up-down. The contents of the object flow horizontally from left to right, with the latter line below the previous line. All the glyphs are vertical. This layout is used by the Roman language family (IE)

(5) tb-rl: top-bottom, right-left. The content in the object flows vertically from top to bottom, from right to left. The latter vertical line is on the left side of the previous vertical row. Full-width characters are (6) vertical and half-width characters, such as Latin letters or katakana, are rotated 90 degrees clockwise. This layout is commonly used in East Asian languages (IE).

Html:

(function (win) {/ / text scrolls horizontally / / hor (); / / horizontal (0); / / text scrolls vertically $(".txtBox") .addClass ("txtBox_4"); ver (); vertical (0) / / Mobile adaptation var doc = win.document; var docEl = doc.documentElement; var tid; function refreshRem () {var width = docEl.getBoundingClientRect (). Width if (width > 768) {width = 768 } var rem = width / 7.5; docEl.style.fontSize = rem + 'px';} win.addEventListener (' resize', function () {clearTimeout (tid)) Tid = setTimeout (refreshRem, 300);}, false); win.addEventListener ('pageshow', function (e) {if (e.persisted) {clearTimeout (tid); tid = setTimeout (refreshRem, 300);}}, false); refreshRem () }) (window)

Css:

Body,html {width:100%; height:100%; position: relative; background: # 232226; overflow-y: auto; overflow-x: hidden;} .topBox, .topBoxTxt {width:100%; height:auto; position: relative;} .topBoxTxt {text-align: center; height:auto;; color:#fff; font-size: 0.36remr; padding-top:55px;} .txtBox {width: 5.6rem Height: 5.2remt; margin:0 auto; overflow-y: scroll;} .txtBox > li {opacity: 0.5; height:0.74rem;} .txtBox > li:first-child {padding-top:60px;} .txtBox > li.hotColor {opacity: 1;} .txtBox_4 {width:4.6rem; height: 7.5remt; overflow-x: auto; white-space: nowrap; display: block }. TxtBox_4 > li {writing-mode:tb-rl; writing-mode:vertical-rl;-webkit-writing-mode: vertical-rl; height: 0; line-height: 0.75rem.word-wrap:break-word;} .txtBox_4 > li {width:0.4rem; text-align: center; margin:0 0.1remr; display: inline-table; position: relative;}

Index.js:

Var freq=10;// scrolling frequency var fraction=9/10;// horizontal text highlight line fixed position percentage var frac=3/10;// vertical text highlight line fixed position percentage var timer=true;// timer var num=-1;// current line subscript var time;// scrolling distance var eul = document.getElementById ("txtBox") Var lis= [{"offset": 3000, "text": "I always understate my wishes"}, {"offset": 6000, "text": "also give you an unspeakable look"}, {"offset": 9000, "text": "there are always people in this world busy searching for treasure", {"offset": 12000, "text": "but miss the floating sun and miss the world." {"offset": 15000, "text": "on the long Bridge in the Ancient City"}, {"offset": 18000, "text": "people travel like sea cars"}, {"offset": 21000, "text": "you laugh like light"}, {"offset": 24000, "text": "suddenly illuminate me"}, {"offset": 27000, "text": "the wind blows the summer is not young"}, {"offset": 30000 "text": "Bicycle on the tree-lined road"}, {"offset": 33000, "text": "so-called love"}, {"offset": 36000, "text": "this is what it looks like"}, {"offset": 39000, "text": ""}] var count=lis.length%7+5 / / text horizontal scrolling function hor () {for (var I = 0; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.