Эффект скручивания на фоне Изображения

Привет Я хотел бы воспроизвести сортировку эффекта слайдера между фоновыми изображениями, например, на веб-сайте http://www.moveline.com/ на домашней странице.Эффект скручивания на фоне Изображения

Примерный заголовок раздела: «Сопоставление деталей для следующего перемещения».

Я смотрю на код, который они используют JQuery, RequireJS (2.1.4)

Я стараюсь изолировать код, который производит этот эффект, но код JavaScript был сжат, что делает его очень трудно понять (плюс они используют магистраль).

Любая идея, как я мог бы воспроизвести это, вероятно, в jQuery с помощью некоторого плагина?

Спасибо

источник

2013-07-12 Jerome Ansia

Перейдите на сайт www.jqueryui.com и найдите плагин. Кто-то, возможно, уже сделал это, и вы можете использовать то, что они сделали в качестве отправной точки. (и сэкономить массу времени) – Tim

Да Тим, если вы можете предложить мне какой-нибудь плагин? (Я уже посмотрел) –

Эффект фоновой анимации не требует никакого плагина. Он использует простые css-переходы, например: http://jsfiddle.net/32a4d/ –

Вот рабочая скрипку почти то, что они делают на своем сайте http://jsfiddle.net/y29kR/2/

сайтов:

<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 с помощью CSS переходов на фоне положении

.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; 
}

Я использую метод .css jQuery для обнаружения (почти) желаемого эффекта:

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'}); 
    }); 
});

источник

2013-07-12 20:52:15 rgoraya

Эффект скручивания на фоне Изображения

ответ

Смежные вопросы