Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #41196

Re: Old-fashioned scrolling text

Show all headers | View raw

Jon Ribbens wrote:

> On 2023-02-10, Tuxedo <tuxedo@mailinator.net> wrote:

[...]

> Without wishing to condone the general terribleness of animated text,
> I'd do something like the below perhaps:
> 
>   * message is in the HTML as simple text
>   * doesn't use hundreds of tiny elements
>   * the browser calculates the necessary size of the message container
>     automatically, and it never changes
>   * wraps properly - words don't appear and then jump to the next line
> 
>     <div id="scroll">
>       <span style="opacity: 0">
>         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
>         Morbi a nisl quis erat viverra mollis at sit amet sapien.
>         Praesent felis dui, blandit sed urna sit amet, hendrerit
>         lobortis augue. Nulla eros nibh, efficitur ac elit et,
>         convallis sagittis eros. Donec accumsan varius dui eget
>         consectetur. Ut blandit vehicula lobortis. Donec commodo
>         lectus sollicitudin lectus ultricies, ornare posuere elit
>         rhoncus. Curabitur vehicula auctor eros, quis pellentesque
>         erat.
>       </span>
>     </div>
>     <script>
>       const message = document.getElementById('scroll').textContent.trim()
>       function scroll () {
>         const output = document.getElementById('scroll')
>         const length = output.firstChild.nodeType === 3
>           ? output.firstChild.length + 1
>           : 1
>         if (length > message.length) return
>         output.textContent = message.substring(0, length)
>         if (length < message.length) {
>           const remaining = document.createElement('span')
>           remaining.style.opacity = '0'
>           remaining.textContent = message.substring(length)
>           output.appendChild(remaining)
>         }
>         setTimeout(scroll, 50)
>       }
>       scroll()
>     </script>

It works perfectly while a window is more or less idle, so running scroll() 
onload once all other objects have fully loaded, texts can scroll smoothly.

Thank you for sharing this pure vanilla Javascript magic!

Tuxedo

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Old-fashioned scrolling text Tuxedo <tuxedo@mailinator.net> - 2023-02-10 14:21 +0100
  Re: Old-fashioned scrolling text Jon Ribbens <jon+usenet@unequivocal.eu> - 2023-02-10 13:32 +0000
    Re: Old-fashioned scrolling text Tuxedo <tuxedo@mailinator.net> - 2023-02-13 21:19 +0100
  Re: Old-fashioned scrolling text Jon Ribbens <jon+usenet@unequivocal.eu> - 2023-02-10 14:27 +0000
  Re: Old-fashioned scrolling text Julio Di Egidio <julio@diegidio.name> - 2023-02-10 08:10 -0800
  Re: Old-fashioned scrolling text "Mark-" <nospam@mapson.xyz> - 2023-02-11 04:09 +0000

csiph-web