JQuery/JavaScript Parallax код - объяснение

Я следую учебник для базового параллакса прокруткой эффекта:JQuery/JavaScript Parallax код - объяснение

http://callmenick.com/2014/09/08/advanced-parallax-scrolling-effect/

Это хороший Tute и довольно легко понять и осуществить, но я наткнулся на какой-то код I просто не могу оглянуться.

(function(){ 

    var parallax = document.querySelectorAll(".parallax"), 
     speed = 0.5; 

    window.onscroll = function(){ 
    [].slice.call(parallax).forEach(function(el,i){ 

     var windowYOffset = window.pageYOffset, 
      elBackgrounPos = "50% " + (windowYOffset * speed) + "px"; 

     el.style.backgroundPosition = elBackgrounPos; 

    }); 
    }; 

})();

Я понимаю, что она перебирает все элементы с классом параллакса, получает YOffset и устанавливает положение фона. Но может ли кто-нибудь пробить эту строку с объяснением?

[].slice.call(parallax).forEach(function(el,i)

UPDATE

Некоторые большие объяснения ниже, но это лучшее решение, чем с помощью JQuery, как так:

$('.parallax').each(function(){ 
     $this= $(this); 
     var window_y = (window.pageYOffset+1000); 
     var elBackgrounPos = "0 " + (window_y * speed) + "px"; 
     $this.css('background-position', elBackgrounPos); 
});

Для меня это гораздо более удобным для чтения, но делает Версия JavaScript работать лучше или более эффективно в некотором роде?

источник

2014-12-17 MP_Webby

document.querySelectorAll возвращает NodeList, который является особым видом объекта DOM. Используя call(), мы можем вызвать метод массивов Javascript slice(), чтобы разбить NodeList на то, что позволяет нам использовать метод forEach, который недоступен в NodeLists.

Попробуйте в консоли Javascript в вашем браузере:

var a = document.querySelectorAll('div') 
a.forEach 

b = [].slice.call(a) 
b.forEach

Вы увидите, что a.forEach вернется undefined и b.forEach вернется

function forEach() { [native code] }

В основном это позволяет нам более легко манипулировать элементами NodeList. Вы также увидите, что свойство __proto__ b - [], а свойство __proto__ - это NodeList. Вот почему b может позвонить forEach, а не может.

источник

2014-12-17 19:26:39 Aweary

Действительно хорошо, спасибо. Как вы думаете, это лучшее решение, чем альтернатива jQuery, которую я добавил? –

Если вы уже используете jQuery в своем проекте и чувствуете себя более комфортно с синтаксисом, определенно используйте параметр jQuery. В противном случае, если это все, что вы используете jQuery для, ванильный javascript, вероятно, был бы лучше, поскольку его легко выполнить без необходимости загрузки jQuery. – Aweary

Объект параллакса имеет тип NodeList, который не имеет метода forEach.

Однако, используя JavaScript-вызов(), который существует для всех объектов, мы можем временно предоставить ему возможность использовать forEach, как если бы это был массив.

можно даже сократить код, чтобы быть просто [].forEach.call(parallax, function(el, i) {...})

call() и применить() методы вы должны обязательно проверить, если вы не знакомы с ними

источник

2014-12-17 19:37:23

JQuery/JavaScript Parallax код - объяснение

ответ

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