RSS scroller

by Peter Galiba

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://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.pipes%20where%20pipeid%3D'0fbe282ad3145b98f867c35c79557bfd'&format=json&callback=?", {dataType: "jsonp"}).done(render);
 }(jQuery));