JSFiddle - React, Tailwind, and code Playground

by Sourabh Singh Rathore

HTML

<div id="imagearea">
    <img src="http://ie.microsoft.com/testdrive/Performance/FlyingImages/Logo1.png" />
<img src="http://ie.microsoft.com/testdrive/Performance/FlyingImages/Logo2.png" />
<img src="http://ie.microsoft.com/testdrive/Performance/FlyingImages/Logo3.png" />
<img src="http://ie.microsoft.com/testdrive/Performance/FlyingImages/Logo4.png" />
</div>

CSS

#imagearea {
    overflow: auto;
    white-space: nowrap;
    padding-right: 500px;
}

#imagearea img {
    width: 200px;
    display: inline-block;
    opacity: .4;
}

JavaScript

(function($) {
    $("#imagearea").each(function(i, area){
        var $area = $(this);
        
        $("img", $area).each(function(j, img) {
            var $img = $(this), x = Math.round($img.position().left),
                w = $img.outerWidth(), right = x + w,
                left = x - w;
            
            $area.scroll(function(e) {
                var sx = $(this).scrollLeft(), opac = .2;
                
                if( sx <= right && sx >= left ) {
                    if( sx >= left && sx <= x ) {
                        if(left < 0) {
                           sx = w - (x - sx);
                        } else {
                           sx -= left;
                        }
                        
                        pct = sx/w;
                    } else {
                        delta = right -sx;
                        pct = delta/w;
                    }
                    
                    //if(pct == Infinity || isNaN(pct))
                    //{ return; }
                    
                    opac += (.8 * pct);
                }
                
                $img.css("opacity", opac);
            }).scroll();
        });
    });
    
    
    
})(jQuery)