Scrolling Text

Wappler General How To
#1

Is there an easy way to created scrolling text that scrolls from top to bottom and the speed of the scroll is controlled by the user of the app? So in other words the user enters some text and presses a button that starts the text to scroll. While it is scrolling that can use a control to pause, start, speed up, and slow down the scrolling. Is this possible in Wappler or does it need to be none with JS?

#2

Hi,
Cutom JS would be required for this. You can make use of Wappler variables etc using dmx.parse in JS, but most of it will have to be done in custom JS.

#3

Theoretically could do this with CSS with some adaptions to the below? Not sure about controlling speed, have you got an example we can all look at?

Add the following to your style.css file:

.left,

.right {

  position: fixed;

  top: 0;

  bottom: 0;

  height: 2.5em;

  margin: auto;

  border-radius: 5px;

  border-color: #fff;

  background: black;

  opacity: 0.7;

}

 

.left {

  left: 0;

  -webkit-transform-origin: 0 50%;

          transform-origin: 0 50%;

  -webkit-transform: rotate(-90deg) translate(-50%, 50%);

          transform: rotate(-90deg) translate(-50%, 50%);

}

 

.right {

   right: 0;

   -webkit-transform-origin: 100% 50%;

           transform-origin: 100% 50%;

   -webkit-transform: rotate(90deg) translate(50%, 50%);

           transform: rotate(90deg) translate(50%, 50%);

}

Then add a button, bind your value and add a dynamic show/hide which could be controlled by any number of ways, a variable, an action, etc.

<button type="button" class="btn right btn-outline-dark" dmx-show="EXAMPLE.data.RESULTS.hasItems()">
    <p> {{BINDINGETC}} </p>
</button>

This will give you a button (could style it further) that stays middle vertical on the right. change the class to btn left for the opposite…

:slight_smile:

Thanks @Teodor eodor was just going to tidy that up hahaha…

1 Like
#4

Cool, ill give it a try. Here is an example:

#5

Sorry Edward I’ve not really helped. Interesting link. I now understand what it is you are after. Can’t say I’ve ever implemented such a feature. As Sid has mentioned it may require a little extra coding and some JavaScript.

Quick search on GitHub found this:

Example:

https://promptr.tv/

Looks very similar to your link above.

#6

Thank you for the git reference, I will check it out.

1 Like