Question / Help Browser source with CSS animation

nerd · Sep 11, 2019

Hey all,

I wrote a little HTML page that I want to use as a template for scrolling text in my scene that I added as a Browser Source. This is what it's supposed to look like (approximately), but in OBS the text does not animate.

Any advice for troubleshooting this?

Code:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
  $(function() {
    $("span").each(function() {
      var element = $(this);

      if(element.parent().prop("offsetWidth") < element.prop("scrollWidth")) {
        element.addClass("marquee");
      }
    });
  });
  </script>
<style>
body {
  background-color: black;
  color: white;
  font-family: Arial, sans-serif;
  width: 100%;
  margin: 0;
}

div {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.song {
  font-weight: bold;
  font-size: 28px;
}

.artist {
  font-size: 24px;
}

.marquee {
  display: inline-block;
  -webkit-animation: marquee 10s infinite linear;
  -webkit-animation-delay: 2s;
}

@-webkit-keyframes marquee {
  20% {
    -webkit-transform: translateX(0%);
  }

  79.999% {
    -webkit-transform: translateX(-100%);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%);
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

</style>
</head>

<body>
<div><span class="song">Song name</span></div>
<div><span class="artist">A really long artist name, I mean really long, like super duper long</span></div>
</body>
</html>

nerd · Sep 12, 2019

Answered my own question here. It seems that elements in the browser source window always have scrollWidth set to 0, so it cannot be used to see if an element is overflowing it's parent container. I switched to using jQuery's width() function instead, and all is working.

JavaScript:

$(function() {
  $("span").each(function() {
    var element = $(this);
 
    if(element.parent().width() < element.width()) {
      element.addClass("marquee");
    }
  });
});

Question / Help Browser source with CSS animation

nerd

New Member

nerd

New Member