滑动背景图片效果

Question

Hi I would like to reproduce a sort a slider effect between background images like the website http://www.moveline.com/ does on the home page.

Example section bellow the title: "Mapping out the details for your next move".

I look at the code they use jQuery, RequireJS (2.1.4)

I try to isolate the code that is producing that effect but the JavaScript code has been compressed which make it really hard to understand (plus they use backbone).

Any idea how i could reproduce this nicely probably in jQuery with the help of some plugin?

Thank you

Answer 1

Here's a working fiddle for almost what they're doing on their site http://jsfiddle.net/y29kR/2/

Html:

<div class="items">
    <div class="menu-item" data-look-at="0 0">item1</div>
    <div class="menu-item" data-look-at="-40px -70px">item2</div>
    <div class="menu-item" data-look-at="-120px -30px">item3</div>
</div>
<div class="menu-content"></div>

CSS with css transitions on background-position

.items {
    float:left;
}
.menu-item {
    padding: 15px;
    color: #333;
    border-bottom: 1px solid #ccc;
    width: 70px;
}

.menu-content {
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    background-image: url("http://placehold.it/350x350");
    background-position: center center;
    float:left;
    -webkit-transition: background-position 600ms ease;
    -moz-transition: background-position 600ms ease;
    -o-transition: background-position 600ms ease;
}

I'm using jQuery's .css method to detect hover event to produce the (almost) desired effect:

jQuery(document).ready(function() {
    $('.menu-item').hover(function(e) {
        var target = $(e.target),
            newPos = target.data("look-at");
        $('.menu-content').css({'background-position': newPos}); 
    });
    $('.items').mouseleave(function(e) {  
        $('.menu-content').css({'background-position': 'center center'}); 
    });
});