This is a modification of Samuel Carreira's clean and simple to use RSSMarquee adding the functionality of reversing the RSS feed for feeds that are ordered oldest-newest.
I would also like to recommend VSG24's Cloudflare CORS Worker script. Simply copy and paste this into a Cloudflare worker and use https://cors-proxy.<username>.workers.dev/corsproxy/?apiurl=<RSSURL>
in the marquee declaration to get around the CORS policy.
Scrolling text like the old <marquee> tag with a customizable RSS feed - Simple code written in Vanilla JS
Test the original (without reversing) here: https://samuelcarreira.github.io/rss-marquee
I shared the code that I wrote for an older project because it can be useful to someone (just browse the JS class written). So this repository doesn't pretend to be some kind of library or anything complex.
- Pure / vanilla JavaScript (no jQuery)
- Multiple RSS feed sources (for fallback)
- Compatible with the most recent browsers
- Uses CSS animations (for performance)
Download the rss-marque.js
script file and declare the RSSMarquee
Class
<body>
<div id="marquee"></div>
<script src="rss-marquee.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const feedUrl = ['https://www.dnoticias.pt/rss/home.xml', 'https://cors-anywhere.herokuapp.com/https://www.buzzfeed.com/world.xml'];
const elementSelector = document.getElementById('marquee');
new RSSMarquee(feedUrl, elementSelector);
});
</script>
</body>
Property | Type | Required | Description |
---|---|---|---|
feedURLs |
string[] |
yes | List of RSS Feed URLs |
elementContainer |
HTMLelement |
yes | the selector of the marquee container |
options.speed |
number |
no | Duration in ms per character. Bigger values = slow speed. Value between 50-300. Default value: 110 |
options.maxItems |
number |
no | specify max number of titles to show (useful to debug: not wait for all titles before goes to the next feed) |
options.hostnameSelector |
HTMLelement |
no | The selector of the element where you want to show the URL of the news feed source (usefull for copyright atttribution) |
options.order |
string |
no | This Property will reverse the order of the fetched RSS feed if you set it as reverse |
I've created this code because I needed a news feed scrolling text on a client project. After a quick search, I found some solutions, but none completely satisfies me. I didn't want to use jQuery and many libraries depend on it. Also, I want to make it at lean as possible and to take advantage of recent browser technologies with graphic acceleration, so I ditched all alternatives who use the setInterval
function to set the animation time.
- The XML feed is fetched using the native
fetch API
- The XML is parsed to extract all the titles
- The titles are processed (remove HTML tags and invalid characters)
- The container element is animated with the
translateX
CSS function - After the animation ends (with the
onfinish
event), the library fetches the next feed
- MIT license
- Copyright 2020 © Samuel Carreira.