1
\$\begingroup\$

I've made this animation using JavaScript and Sass CSS.

Relevant is the code inside the IIFE. Because that's what I like to keep and develop further. Perhaps use it for future projects. Everything else is just quick & dirty made demo and less important.

My code with uncompiled Sass CSS:

document.querySelector('.reload a').addEventListener('click', () => {
  location.href = 'index.html';
});

(function(headline, duration) {
  'use strict'
  // ---- Declarations & Parameter Validation --------------
  var i = 0;
  var display = document.querySelector('.ticker-display');

  if (!display) {
    throw new Error(
      'HTML element with a CSS-class \".ticker-display\" expected.');
  }

  if ((typeof headline).toLowerCase() !== 'string') {
    throw new Error(
      `1. Param: String expected but ${typeof headline} found.`);
  }

  if (headline.length < 1) {
    throw new Error(
      '1. Param: String with a length greater 0 expected.');
  }

  if ((typeof duration) !== 'number') {
    throw new Error(
      `2. Param: Number expected but ${typeof duration} found.`);
  }

  if (duration < 10) {
    throw new Error(
      '2. Param: Duration has to be at least 10 ms.');
  }
  // -------------------------------------------

  var interval = setInterval(() => {
    let text;

    function createText(text) {
      i++;

      if (/\s/.test(text.charAt(i))) {
        createText(text + headline.charAt(i));
      } else {
        return text;
      }
    }

    text = createText(headline.charAt(i));

    let span = document.createElement('span');
    let textNode = document.createTextNode(text);

    span.appendChild(textNode);
    display.appendChild(span);

    if (i === headline.length) {
      clearInterval(interval);
    }
  }, duration)
})('Lorem ipsum dolor sit amet', 200);
$backgroundColor: #000;
$fontColor: #fff;
$tickerColor: rgb(100, 255, 0);
$fontStack: 'Audiowide',
'Lucida Console',
courier,
monospace;
$letterSpace: 3px;
html,
body {
  background-color: $backgroundColor;
  width: 100%;
  height: 100%;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
  min-height: 100px;
}

.ticker-display {
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: $letterSpace;
  font-weight: 900;
  font-family: $fontStack;
  white-space: pre;
}

.ticker-display span {
  opacity: 0;
  animation: appear 5s;
  animation-fill-mode: forwards;
  color: $tickerColor;
  text-shadow: 1px 1px 0 rgb(200, 255, 100), -1px -1px 0 rgb(200, 255, 100);
}

.reload {
  text-align: right;
  margin: 20px 40px 0 0;
}

.reload a {
  color: $fontColor;
  font-family: $fontStack;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 3px solid;
  border-radius: 6px;
}

.reload a:hover {
  opacity: 0.8;
}

.reload a:active {
  color: $tickerColor;
}

@keyframes appear {
  to {
    opacity: 1.0;
    text-shadow: 1px 1px 1px rgb(230, 255, 130), -1px -1px 1px rgb(230, 255, 130);
  }
}
<section>
  <div class="reload">
    <a href="#">Reload</a>
  </div>
  <div class="wrap">
    <div class="ticker-display"></div>
  </div>
</section>

Here's a working Live Demo.

The complete project folder on GitHub.

The recursion part is for to avoid weird looking delays which appear when the given string contains a sequence of more then one blank.

What do you think about the validation part?

Are there flaws with the validation? Is it exaggerated what I do there?

And what do you think about my solution with the recursive function for to avoid a delay of the next character?

Would appreciate your opinions as well as other hints, comments and recommendations.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.