Re: Old-fashioned scrolling text

Path	csiph.com!weretis.net!feeder8.news.weretis.net!reader5.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From	Tuxedo <tuxedo@mailinator.net>
Newsgroups	comp.lang.javascript
Subject	Re: Old-fashioned scrolling text
Date	Mon, 13 Feb 2023 21:19:47 +0100
Lines	53
Message-ID	<tse32q$s2sf$1@solani.org> (permalink)
References	<ts5de5$nka0$1@solani.org> <slrntuchrj.7rq.jon+usenet@raven.unequivocal.eu>
Mime-Version	1.0
Content-Type	text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding	7Bit
Injection-Date	Mon, 13 Feb 2023 19:29:31 -0000 (UTC)
Injection-Info	solani.org; logging-data="920463"; mail-complaints-to="abuse@news.solani.org"
User-Agent	KNode/4.14.10
Cancel-Lock	sha1:3lN1fiW+PF4a+KshpFcWAfSS/QA=
X-User-ID	eJwFwYEBwCAIA7CXRKDFcyas/59gkg5DM5CIVGpCvDIXznSPwK7kof2Oc4uzYLX21Ze1FXwrdxEk
Xref	csiph.com comp.lang.javascript:41196

Show key headers only | 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

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