Изменение фоновых изображений с помощью плагина колесика мыши

Question

Я пытаюсь изменить фоновое изображение страницы при использовании прокрутки/прокрутки колесика мыши. Что-то like this page here.

У меня есть три разных фоновых изображения, которые я хочу изменить (например, приращение, когда пользователь прокручивает вниз/уменьшаться при прокрутке пользователя).

See jsfiddle here (что действительно не так надеется).

См. Также код ниже.

Надеюсь, ясно, чего я пытаюсь достичь. Если нет, сообщите мне, и я могу предоставить дополнительную информацию.

CSS

.bgImage { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 100%; 
    z-index: 1; 
} 

body, html, #scene, .bgImage { 
    height: 100%; 
} 

.home{ 
    background: url("http://cdn3-www.wrestlezone.com/assets/uploads/gallery/ric-flair/gettyimages-93353438.jpg") center center no-repeat; 
    background-size: cover; 
} 

.brett { 
    background: url("http://2.bp.blogspot.com/-69o3lsK5MrQ/ThhlOTxGQlI/AAAAAAAAEfY/e0AJF-6sKBw/s1600/bret_hart_-_bret_hart_74.jpg") center center no-repeat; 
    background-size: cover; 
} 

.hulk{ 
background: url("https://tse3.mm.bing.net/th?id=OIP.M44755b5d2bade01af176621c77ebe279o2&pid=15.1&P=0&w=300&h=300") center center no-repeat; 
    background-size: cover; 
} 

HTML

<div class="bgImage"></div> 

JS

var pages = ['home','brett','hulk']; 
var page = 0; 

$(document).ready(function(){ 

    $('.bgImage').on('mousewheel', function (e) { 
     if (e.deltaY>0) { 
      page += 1; 
      if(page >= pages.length){ 
       return; 
      }else{ 
       jQuery('.bgImage').addClass(pages[page]); 
      } 
     } else { 
      page -= 1; 
      jQuery('.bgImage').removeClass(pages[page]); 
     } 
     e.preventDefault(); 
    }); 
}); 

Answer 1

Сразу я могу вам сказать, что you'l Возможно, вам нужна более прочная структура прокрутки, чтобы эмулировать сайт, с которым вы связаны. Попробуйте просмотреть scrollmagic.io за идеи о том, как это выполнить. Один из способов взглянуть на это - вы, по сути, захватываете прокрутку и применяете их к «временной шкале» событий, если хотите.

Чтобы получить пример работает, проверить эту скрипку:

https://jsfiddle.net/1nrL5gv1/20/

Одна важная вещь, я добавил было удаление всех существующих классов, прежде чем применить новый. Таким образом, будет отображаться только самое последнее изображение, и вам не придется беспокоиться о специфике/порядке CSS.

function cleanUpBg() { for(i = 0; i < pages.length; i++) { bgEl.removeClass(pages[i]); } }

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