Horiz Scroll Example

by coltrane

HTML

<div class="h-scroller"><div>
    <img src="http://www.publicdomainpictures.net/pictures/4000/velka/1-1245672941FnRC.jpg" />
    <img src="http://www.publicdomainpictures.net/pictures/9000/nahled/road-to-tunnel-23441281543053CQoL.jpg" />
    <div>
        <h3>Bio</h3>
        <p>This box contains text, and maybe other stuff
            too.
        </p>
        <p>This box contains text, and maybe other stuff
            too.
        </p>
    </div>
    <img src="http://www.publicdomainpictures.net/pictures/9000/nahled/peas-331280422278eGoR.jpg" />
</div></div>

CSS

.h-scroller {
    overflow: auto;
    overflow-y: hidden;
}

.h-scroller > div {
    position: relative;
    width: 5000px;
}

.h-scroller > div > * {
    height: 200px;
    width: 100px;
    float: left;
    border: 1px solid black;
    margin: 10px;
    padding: 5px;
    overflow: hidden;
    overflow-y: auto;
}

.h-scroller > div > img {
    width: auto;
}
h3 {
    font-weight: bold;
    font-size: 1.2em;
}
p {
    margin-top: 1em;
}

JavaScript

$(document).ready(function() {
    var rootEl = $('.h-scroller');
    var contentEl = $('> div', rootEl);
    var currentItem = null;
    
    /**
    * update() - evaluate the current position of the
    * scroller, determine which item should currently be
    * "highlighted", and adjust opacity accordingly.
    * store the currently highlited item in `currentItem`
    */
    function update() {
        // fetch all items each time through, this picks up any
        // changes to the contentEl over time.  (If changes are
        // not important, then move this outside `update()` to
        // improve performance.)
        var allItems = $('> *', contentEl);
        
        // compute current scroll value
        var scrollX = contentEl.offset().left - rootEl.offset().left;
        
        // find the current item, and set opacities accordingly
        currentItem = null;
        allItems.each(function(i, el) {
            el = $(el);
            if (currentItem || el.position().left < -(scrollX)) {
                el.css({'opacity': '.45'});
            } else {
                el.css({'opacity': '1'});
                currentItem = el;
            }
        });
    }
    
    // bind: scroll event
    rootEl.scroll(function(evt) {
        // when scroll changes, call update
        update();
    });
    
    // call update once at page load to 
    // initialize everything.
    update();
});