JSFiddle - React, Tailwind, and code Playground

Banner Proof of Concept

by Emily Humphrey

HTML

<div class="hero">
  <div class="banner-1 banner JS-banner" data-banner-text="coming soon"></div>
  <div class="banner-2 banner JS-banner" data-banner-text="hello"></div>
  <div class="banner-3 banner JS-banner" data-banner-text="coming soon"></div>
</div>

SCSS

body {
  font-family: sans-serif;
  overflow: hidden;
}

.banner {
  display: block;
  width: 120%;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  padding: 4px 0;
}

.shell-element {
  position: relative;
  display: block;
  white-space: nowrap;
  transform: translateX(-100%);
  transition: all 0s linear 0s;
}

.shell-element.animate {
  transform: translateX(-0%);
  transition: all 10s linear 0s;
}

.inner-element {
  display: inline-block;
}

.inner-element.before{
  position: absolute;
  right: 100%;
}

.banner-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}

.banner-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 2;
}

.banner-3 {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 2;
}

JavaScript

Banner.prototype = {
  repeat_amount: 10000,
  resetTimer: 10,
  initialiaze_element() {
    this.make_full_copy();
    this.inner_element.html(" " + this.copy);
    this.shell_element.append(this.inner_element.clone().addClass("before"));
    this.shell_element.append(this.inner_element);
    this.shell_element.append(this.inner_element.clone().addClass("after"));
    this.$element.append(this.shell_element);
    this.begin_animation()
  },
  make_full_copy() {
    var copy = this.copy;
    for (var i = 0; i < this.repeat_amount; i++) {
      this.copy += " " + copy + " ";
    }
  },
  begin_animation() {
      this.shell_element.addClass("animate");
    setTimeout(function() {
      this.reset_animation()
    }.bind(this), this.resetTimer * 1000);
  },
  reset_animation() {
    this.shell_element.removeClass("animate");
    setTimeout(function() {
      this.begin_animation();
    }.bind(this), 100)
  }

}

function Banner($banner) {
  this.$element = $banner;
  this.inner_element = $("<div class='inner-element'></div>");
  this.shell_element = $("<div class='shell-element'></div>");
  this.copy = $banner.data("banner-text");
  this.initialiaze_element();
}

$(".JS-banner").each(function() {
  new Banner($(this));
})