Idea #10 in the JavaScript Idea Series – Scrolling Text Box Effect
This idea was sparked by a question that you can read at the link below.
https://elearning.adobe.com/2021/11/interactive-widget-scrolling-text/
The issue really stemmed from the interactive scrolling widget but it got me thinking about whether or not we could try to make something that was a little more controllable. This project could be further enhanced in a number of ways – here are just a few:
- Add a slider that is tied directly to the animation of the text box.
- Disable the buttons until the animation is finished so users don’t spam the button
- Make it so that you can simply press and hold the button
The values can be adjusted for your size text box and animate to your desired distance and speed.
Nice! Is track() is a function you’ve written?
After reading your solution, I tried to play with adding …style.overflowY=”scroll” to the textbox, but then I realized that the text is actually contained in an aria-label tag; so, while scrollbar appeared, technically the textbox div was empty so there was nothing to scroll.
Yes – I wrote the function and simply called it track().
Captivate does some strange things with the objects on publish – making folks think outside the box a bit in order to accomplish some things.
I did this because it would be an easy way to still go in and modify the text if you needed to as opposed to dropping in the web object which is less easy to update.
There are trade-offs – like this solution would require a little more thinking to resize the box but I think it is fun to realize some of the possibilities with JavaScript.
No doubt someone could make a much more elegant version of this crude mockup I threw together.
You must be logged in to post a comment.
