A Pen by KurtWM.

index.html

<div id="container">
  <img id="polar-bear-image" src="http://www.johnsonferry.org/portals/0/assets/newsevents/images/polarBearRunners_transpLeft_tinypng.png" alt="Polar Bear Run 2014" style="display: none;" />
  <h3>Header Goes Here</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet orci vel dui luctus accumsan. Fusce malesuada tristique orci, sit amet luctus neque placerat et. Aliquam consequat tellus auctor massa auctor, vel condimentum elit congue.</p>
    <img id="polar-bear-image" class="sample" src="http://www.johnsonferry.org/portals/0/assets/newsevents/images/polarBearRunners_transpLeft_tinypng.png" />
  <p><strong>Here is the actual PNG image used in the loop. The left side provides transparency to allow the image to seamlessly overlap itself. </strong></p>
  </div>

script.js

/**
 * jquery.scrollon.js
 * Updated: Mon Sep 16 2013
 * Add endless scrolling to any image
 * Copyright (c) 2013 kurt meredith
 * https://github.com/kurtwm TODO: add url
 */

(function ($) {
    'use strict';
    $.fn.scrollon = function (options) {
        var scrollon = this,
            settings = $.extend({
                speed: 20000,
                overlap: 0,
                scrollLeft: true,
                width: 200,
                height: 200,
                css: ""
            }, options),
            imgWidth = this.outerWidth(true) + settings.overlap,
            helper = function (obj) {
                obj.animate({
                    marginLeft: -imgWidth
                }, settings.speed, "linear", function () {
                    obj.css({
                        marginLeft: "-" + (settings.overlap) * 2 + "px"
                    });
                    setTimeout(function () {
                        helper(obj);
                    }, "linear", settings.speed);
                });
            },
            scroller = function () {
                scrollon.each(function (e) {
                    // Use a helper function outside of the each loop.
                    helper($(this));
                });
            },
            init = function () {
                scrollon.wrap("<div class=\"scrollon-wrap\" "
                    + "style=\"overflow: hidden; white-space: nowrap; width: " 
                    + settings.width + "px; height: " 
                    + settings.height + "px;" + settings.css + "\">").css({
                    "position": "relative",
                    "margin-right": "-" + settings.overlap + "px",
                    "left": "-" + settings.overlap + "px"
                }).show(); // We use show() in case the original image has been hidden.

                scrollon.after(scrollon.clone()); // Clone a copy of the image beside the original.
                scroller();
            };
        init();
        return scrollon;
    };
}(jQuery));

$("img[alt*='Polar Bear']").scrollon({
    speed: 50000,
    overlap: 130,
    width: 300,
    height: 172,
  css: "position: relative; float: right; margin-left: 12px;"
});

scrollon.js---jQuery-plugin:-Endless-scrolling-image.markdown

scrollon.js - jQuery plugin: Endless scrolling image

An image within an element will endlessly scroll. The image in this sample is not set up to seamlessly tile, so it is a PNG with transparency along one edge, and the image is set with a negative margin on that side to make it overlap. The still image underneath is the image with transparency.

A Pen by KurtWM on CodePen.

License.

style.css

#container {
  width: 640px;
}

.sample {
  margin-top: 60px;
}