Simple Scrolling Credits


Example of credits in using a simple scrolling style that allows for easy font and color changes in an editor as well as including intro and outro text/images.

Note: Original code for these credits were taken from a Codepen fork where it’s true original author could not be ascertained


  • Zipped folder with HTML, JS and CSS files
  • Video describing steps involved in adding, editing and styling credits
  • Notes to addressed updated features post-video released

Files (2.9 KB)

Download the files needed by clicking the link above and extract the folder to where you save your files used in your stream


Add a browser source to OBS and tick the “Local File” box and then browse to the folder you just extracted. Point to the index.html file.


The credits are styled using the included CSS (styles.css) file. While some of the more advanced changes will take a basic understanding of web development changing the two colors and (to a certain degree) the fonts are not complicated things to do. You will need a text editor. If you are working with an unaltered style.css you fill find the following sections on the listed line of the editor:

  • Font Class Import (Google Font) ---- Line 1
  • Font Name and Size ------------------- Line 21
  • RGB Color Code For Names Listed – Line 24
  • RGB Color Code for Titles/Sections – Line 37


Video Notes/Updates

Since the release of this video some things have been added to the JS page, allowing for adding text and/or image URLs to the start and/or end of the credits as they scroll. You will find where to add them in the script.js file, lines 71-79.