News ticker - possible in Blocs?

I Need Help
14

My personal thanks to all who commented. I appreciate the advice.

I now have a free jQuery ticker running on the top page of my website here. Please view it on a desktop or notebook computer because it only displays in the LG breakpoint. I ended up having to put the code in the Footer (in Blocs 3.3) because, for the life of me, I cannot figure out how to get the code to work in the Header. Using relevant portions of @Jannis code doesn’t work.

I wanted to see if I could get the code to work in the Header because when you first load the page, you see all of the ticker contents spill onto the page and then a split-second later it gets cleaned up and put inside its box. I don’t really like that split-second text dump. Not sure if having the code work in the header would fix that glitch. Here’s the code:

FOOTER CODE (works):

<link rel="stylesheet" href="https://kiramek.com/css/breaking-news-ticker.css">
<script src="https://kiramek.com/js/breaking-news-ticker.min.js"></script>

<script>
$('#example').breakingNews({
  effect: 'scroll',
  scrollSpeed: 2,
  fontSize: "16px",
  themeColor: "default", 
  background: "black",
  borderWidth: 1
});
</script>

HEADER CODE (not used because it doesn’t work):

<link rel="stylesheet" href="https://kiramek.com/css/breaking-news-ticker.css">
<script src="https://kiramek.com/js/breaking-news-ticker.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function(event) { 
$('#example').breakingNews(function(){
  effect: 'scroll',
  scrollSpeed: 2,
  fontSize: "16px",
  themeColor: "default", 
  background: "black",
  borderWidth: 1
});
});
</script>

INSTRUCTIONS
Basically, you just add a new bloc/column/code widget in Blocs, then add the following code into the code widget:

<div class="breaking-news-ticker" id="example">
  <div class="bn-label">NEWS</div>
  <div class="bn-news">
    <ul>
      <li><a href="https://headlines.yahoo.co.jp/hl?a=20190702-00000104-dal-life">    2019年7月3日：リレーアタック犯が全国で初逮捕   </a></li>
      <li><a href="https://kiramek.com/pouch/">2019年2月18日：リレーアタック対策用電波遮断ポーチ SP001V, SP002S 新発売！   </a></li>
      <li><a href="https://kiramek.com/japanese/products/RSR.html">2018年10月12日：イモビカッター妨害装置 （リレーアタック対策機能付）トヨタ車用 RSR300, RSR500 新発売！   </a></li>
    </ul>
  </div>
</div>

Use your on URLs inside the “a href” tags and of course your own text instead of my Japanese. Be sure to put plenty of spaces to the left of the first line, otherwise when the page loads it will be in motion and you will miss the first few characters of text. Add spaces after the other lines to ensure there are noticeable gaps to make things easier to read. After that, just open Page Settings > Code > Footer and copy/paste my footer code above, but change the links to “breaking-news-ticker.css” & “breaking-news-ticker.min.js” to your own server (no hot-linking to my server, please). I left links to the CSS on my server above because I edited it and some of you may wish to see my edits.

All said, if anyone knows how to prevent the split-second dump of all news data when the page first loads, that would make this particular ticker perfect. For now, it’s pretty decent, I think, especially because it’s free. And yes, it’s responsive too, although I prefer to keep it visible only in LG on my site. (The movement of the text can be sluggish on some mobile devices, although it’s quite lovely when viewed on my iMac.)

Thanks,

James