This is the first day of my participation in the August Text Challenge.More challenges in August

H5 natively implements notification message bar

Recently wanted to write a notification message scrollbar, thought about it, can use CSS animation effects and JS implementation. Specific ideas:

  1. When the first message scrolls to the left, the second message should also follow to make it look smooth and not space, so you can make two divs side by side and scroll 100% to the left at the same time.
  2. To finish first scroll to see, that is broadcast over the first message, the second is just between pages, this time a timer to replace the order of the array news, finally put the first message in the array, the second message is replacing the first message as to the next scroll to invisible, can achieve cohesion.
  3. circularly

When you have a good idea, start writing:

  • HTML part:
<div class="bg"> <div id="box" class="scroll_box"> <! Class ="text text_scroll"></div> <div id="t2" class="text text_scroll"></div> <! - after a line - see - > < div id = "t3" class = "text" > < / div > < / div > < / div >Copy the code
  • CSS styles:
<style> body { margin: 0; padding: 0; } .scroll_box { position: relative; width: 100vw; Height: 6.9 vw; background: sandybrown; display: flex; justify-content: start; align-items: center; overflow: hidden; } @keyframes toLeft { 0% { right: 0; } 100% { right: 100%; } } @-webkit-keyframes toLeft /* Safari and Chrome */ { 0% { right: 0; } 100% { right: 100%; } } .text { min-width: 100vw; text-align: center; position: relative; The font - size: 2.7 vw; color: #fff9df; The line - height: 3.7 vw; flex-shrink: 0; } .text_scroll { animation: toLeft 5s linear infinite; -webkit-animation: toLeft 5s linear infinite; /* Safari and Chrome */ } </style>Copy the code
  • Js:
Var scrollList = "In the ninth year of Yonghe, at the age of Guichou, at the beginning of late spring, he would go for an outing at the LAN Ting, shanyin Kuiji. Gather the sage together, and grow the salt less. Here there are mountains, forests and bamboo, and there is a clear current exciting turbulence, around the projection belt, led to think that the sandy-lovee water, row sit next. Although there is no silk and bamboo orchestra sheng, a crystal, also enough to Syria. The sun is also, the sky is clear, the wind is smooth. Looking up to the universe of the big, look at the sheng of the categories, so the view is free, enough to entertain the hearing and hearing, the letter also coke. The lady with, bow a world. Or take the embrace and realize the words in one room; Or because of the trust, loose beyond. Although the interest is different and the restlessness is different, when it is happy in the encounter, it temporarily obtains from itself, and quickly becomes self-sufficient, not knowing that old age is coming. I am tired of feeling sorry for myself. To the xin, between the bow, has been a relic, still can not not with the xing Huai, the situation is short with the end of the end! The ancients said, "Death and life are also great." It doesn't hurt! Every glance past people xing feeling by, if the unity of the deed, not not in the text of mourning, can not be yu Huai. Solid know dead life for vain, Qi Peng shang for vain. After the sight of today, but also today of the past, sad husband! Therefore, the people of the time, recorded its description, although the world is different things, so xing Huai, its cause one also. After the view, will also feel sven." The split ('. ') var box = document.getElementById('box') var t1 = document.getElementById('t1') var t2 = Document.getelementbyid ('t2') var t3 = document.getelementById ('t3') var setText = function () {document.getelementById ('t2') var t3 = function () { for (let i = 0; i < scrollList.length; I++) {t1.innerText = scrollList[0] + ' 't2.innerText = scrollList[1] +'. 't3. InnerText = scrollList[2] +'. Var setDanMuSrcoll = function () {timer = setInterval(() => {// Concatenate the first line to the end of the array Scrolllist.push (scrollList[0]) // Delete first line scrollList.shift() // reset text setText()}, 5000)} setDanMuSrcoll()Copy the code

Note: Because the CSS style scroll time is 5s, so the array order should be changed regularly 5s. If the time needs to be changed, the two should be changed to the same, otherwise they will not connect.

In addition, because the timer is set, you need to destroy the timer when leaving the page:

window.onbeforeunload = function () {
    clearInterval(timer)
  }
Copy the code

Small vegetables ji record notes 1