Unroller

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<title>Unroller by JoeSimmons</title>

<script type="text/javascript">

    function unroll(obj) {
        'use strict';

        // error prevention
        var settings = obj || {};

        // set constants
        var pause = Math.floor( (typeof settings.pause === 'number' ? settings.pause : 1) * 1000 ); // default 1 second
        var width = settings.width || 1000; // default 1000 px
        var interval = settings.interval || 33; // default 30 fps
        var increment = settings.increment || 5; // default 5 px
        var limit = typeof settings.limit === 'number' && settings.limit > 0 ? settings.limit : 0; // default infinite

        // set other variables
        var element; // holds the element. is updated in .start()
        var current_iteration = 0;                  // keep track of how many times the text is unrolled
        var current_width;    // keep track of the element's width
        var enabled = false; // this is so the unroller can be stopped, but then started again
        var intv;                                   // a variable to hold a setInterval instance
        var thisObj;                                // so the constructor can have an easier time referring to the methods it returns

        // this function handles all the 'width' style changes
        function changeWidth() {
            if (current_width > width) { // we hit our max width
                window.clearInterval(intv); // stop changing the width for this element
                current_iteration += 1;

                // if the unroller hasn't hit its limit,
                // or the limit is infinite (0), keep unrolling
                if (limit === 0 || current_iteration < limit) {
                    // after the pause amount, do this
                    // pretty self-explanitory. that's the way I like to write
                    window.setTimeout(function () {
                        // check the 'enabled' boolean in-case the user stopped
                        // the unroller when it was paused
                        if (enabled === true) {
                            current_width = 0;
                            element.style.width = '0px';
                            element.style.top = getRandomInt(0, 170) + 'px';
                            thisObj.start(); // start unrolling again
                        }
                    }, pause);
                }
            } else { // we didn't hit our max width yet
                element.style.width = current_width + 'px';   // set the width
                current_width += increment;                   // increment the width
            }
        }

        function getRandomInt(min, max) {
            return Math.floor( Math.random() * (max - min + 1) ) + min;
        }

        // we use 'thisObj' (or another variable) so changeWidth()
        // can call this method, as well as the user
        thisObj = {
            'start' : function () {
                // re-get the element in-case it was null when
                // the unroller was created
                if (!element) {
                    element = document.getElementById(settings.id);
                }

                if (element) { // throw an error if the id the user passed was null
                    thisObj.stop(); // clear any old interval
                    enabled = true;
                    current_width = element.offsetWidth; // grab our current width
                    intv = window.setInterval(changeWidth, interval);
                } else {
                    throw new Error('Unroller: The ID "' + settings.id + '" is null.');
                }
            },
            'stop' : function () {
                enabled = false;
                if (typeof intv === 'number') {
                    window.clearInterval(intv);
                }
            }
        };

        return thisObj;
    }

    var newUnroll = new unroll( {
        'id' : 'strap',         // id of the element to use
        'pause' : 0,            // how many seconds to pause for between unrollings
        'width' : 600,          // max width of the element
        'interval' : 1000 / 60, // interval when which the element's width will be changed
        'increment' : 10,       // how many pixels to widen the element by each interval
        'limit' : -1            // how many times to unroll the element ( <= 0 is infinite )
    } );

</script>

</head>

<body>

<p id="strap" style="width: 0px; overflow: hidden; position: fixed; white-space: nowrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lacus enim. Etiam mattis ligula et tellus iaculis tempor. Etiam lobortis lobortis aliquet. Phasellus a tristique lacus, vitae aliquam quam. Phasellus non enim nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam sit amet massa sed ipsum gravida iaculis. Duis feugiat massa non fringilla suscipit. Nam posuere posuere convallis. Aenean auctor urna eget nulla dignissim vestibulum. Vivamus hendrerit massa eu congue ornare. Sed id vulputate metus. Duis nec nibh sit amet mauris auctor feugiat in quis purus amet.</p>

<div style="position: fixed; bottom: 40%; left: 5%;">
    <input type="button" value="Start" onclick="newUnroll.start()" />
    &nbsp;&nbsp;
    <input type="button" value="Stop" onclick="newUnroll.stop()" />
</div>

</body>

</html>