RSS scroller
HTML
<aside>
<section id="feed"></section>
</aside>
CSS
@-webkit-keyframes scroll {
from { -webkit-transform: translate(0, 0); }
to { -webkit-transform: translate(-2200px, 0); }
}
aside {
display: block;
width: 600px;
overflow: hidden;
margin: 0 auto;
}
#feed {
white-space: nowrap;
display: block;
height: 200px;
-webkit-animation: scroll 10s linear infinite;
font-family: sans-serif;
}
#feed article {
width: 200px;
height: 100%;
overflow: hidden;
display: inline-block;
white-space: normal;
padding: 0 5px;
}
#feed article h1 {
margin: 0;
}
#feed article a {
display: block;
}
JavaScript
(function ($) {
function render(data) {
var feed = $("#feed"),
results = data.query.results,
result = (results.json || results).result.value;
if (result) {
result.forEach(function (item) {
$('<article>').append($('<h1>').append($('<a>', {href: item.link, text: item.title, target: "_blank"}))).appendTo(feed);
});
}
}
$.ajax("https://zapier.com/engine/rss/1514995/bobchavezcomments/", {dataType: "jsonp"}).done(render);
}(jQuery));