How do I add scrolly text jquery to ASP.NET and allow VB.NET to change message?

See more:

VB

ASP.NET

jQuery

I'm just learning but have a website written in Asp.Net & VB.Net to which I wish to add some 'Scroll Text' code. I don't want to use 'Marquee' as it is not well supported. I need to figure out a way to add the code to my page and be able to have it scroll a 'Label' so that I can change the text programatically. Here's the code I found on Codepen...

<div id="promo-notifications">
  <ul>  
    <li>**CURRENT PROMO** Buy 5 and get 1 free ~ Only for a limited time! 
    </li>
    <li>**CURRENT PROMO** Refer 20 friends and get a gift certificate for $100!</li>
  </ul>
</div>

jQuery(document).ready(function($) {
  var promoticker = function() {
  var window_width = window.innerWidth;
  var speed = 12 * window_width;
  $('#promo-notifications li:first').animate( {left: '-980px'}, speed, 
 'linear', function() {
  $(this).detach().appendTo('#promo-notifications ul').css('left', "100%");
  promoticker();
    });
  };
  if ($("#promo-notifications li").length > 1) {
    promoticker();
  }
});

html, body {margin:0; padding: 0; width: 100%;}
#promo-notifications{
    background: #F4A8BE;
    font-size: 18px;
  width: 100%;
  font-family: 'Helvetica-Neue', Helvetica, Arial, sans-serif;
}

#promo-notifications ul{
    width: 100%;
    height: 35px;
    position: relative;
    overflow: hidden;
}

#promo-notifications li{
    width: 980px;
    line-height: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    left: 100%;
    text-align: center;
    list-style: none;
}

I have added the CSS code to my CSS file and then put the HTML and JQuery code just in my Asp.Net front end but it doesn't work...

Once working I wish to be able to use a 'Label' with it or have some way that I can change the text from the VB code.

Many thanks for any help at all.

What I have tried:

<%@ Page Title="" Language="VB" MasterPageFile="~/Site2.master" AutoEventWireup="false" CodeFile="contact-us.aspx.vb" Inherits="contact_us" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

jQuery(document).ready(function($) {
  var promoticker = function() {
    var window_width = window.innerWidth;
    var speed = 12 * window_width;
    $('#promo-notifications li:first').animate( {left: '-980px'}, speed, 'linear', function() {
      $(this).detach().appendTo('#promo-notifications ul').css('left', "100%");
      promoticker();
    });
  };
  if ($("#promo-notifications li").length > 1) {
    promoticker();
  }
});

<div id="promo-notifications">
    <ul>  
    <li>**CURRENT PROMO** Buy 5 and get 1 free ~ Only for a limited time!</li>
    <li>**CURRENT PROMO** Refer 20 friends and get a gift certificate for $100!</li>
  </ul>
</div>
</asp:Content>