Scrolling with Motion-Blurred Text

That's some fast scrolling!

HTML

<div id="scroller">
    
    <p> <img class="scroll-momentum box" src="http://www.mikeloucas.com/re-up/wp-content/uploads/2018/08/balloon.png"> </p>
    
    <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
    
    <p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>
    
    <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
    
    <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
    
    <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
    
    <p>My money's in that office, right? If she start...

CSS

body #scroller {
    background: hsl( 100, 50%, 50% );
    font-family: Helvetica, sans-serif;
    padding: 25px;
        background: hsl( 100, 50%, 30% );
    border-radius: 5px;
    box-shadow: inset 0 0 1em hsla( 0, 0%, 0%, 0.5 );
    color: white;
    height: 400px;
    overflow-y: scroll;
    padding: 20px;

}







div#scroller.scrolling {
    color: hsla( 0, 0%, 100%, 0.2 );
    text-shadow:
        0 -6px 1px hsla( 0, 0%, 100%, 0.2 ),
        0 -3px 1px hsla( 0, 0%, 100%, 0.2 ),
        0 3px 1px hsla( 0, 0%, 100%, 0.2 ),
        0 6px 1px hsla( 0, 0%, 100%, 0.2 );
}

JavaScript

$( document ).ready(function() {
        
    var scrollStop,
        $scroller = $( '#scroller' );
    
    // For production, we'd want to add a throttler
    $scroller.bind( 'scroll', function( event ) {
        var $this = $( this );
        
        if ( ! $this.hasClass( 'scrolling' ) ) {  
            $this.addClass( 'scrolling' );
        } else {
            clearTimeout( scrollStop );
        }
        
        scrollStop = setTimeout( (function() {
            $( 'div' ).removeClass( 'scrolling' );
        }), 50 );
        
    });
    
});