Marquee Function

Ask the community
,
1

Question: What would be the best code/way to get a side-ways marquee text effect going on a website?

Please see the attached video as an example. If there are different effects and variations, I would like to know, too.

2

I have created the following using some show and hide magic -

The code to create this effect is using the show and hide functions and two overlapping text elements, named in this example code as ‘text3’ and ‘text4’.

The code to make it happen is the following -

$w.onReady(function () {
  let toggle = true;
  const animationCycle = 2000;
  const animationDuration = 1000;
  const hideDelay = 500;
  setInterval(() => {
    if (toggle) {
      $w('#text4').show('slide', { duration: animationDuration,
        direction: 'right' });
    } else {
      $w('#text3').show('slide', { duration: animationDuration,
        direction: 'right' });
    }
    setTimeout(() => {
      if (toggle) {
        $w('#text3').hide('slide', { duration: animationDuration });
      } else {
        $w('#text4').hide('slide', { duration: animationDuration });
      }
      toggle = !toggle;
    }, hideDelay);
  }, animationCycle);
}

The codes does the following -

  1. Sets an interval (animationCycle - 2000 mSec) at which is toggles between the two texts.

  2. On each interval, it hides one of the texts and shows the other. Lets denote the displayed text as the ‘visible text’, and the one hidden at this point in time as the ‘hidden text’.
    This is implemented using the ‘setInterval’ Javascript function.

  3. It firsts show the hidden text using the ‘slide’ animation from the right, with a duration of ‘animationDuration’ - 1000 mSec.

  4. On a delay of ‘hideDelay’ - 500 mSec - it starts to hide the visible text, again using the slide animation, this time to the left, with the same duration.

Having the hidden text become visible with a duration of 1 sec, and the visible text start to become hidden with a delay of 0.5 sec and a duration of 1 sec causes the effect some overlap in the animations which makes the overall experience looking like a single animation.