기본 시차 스크롤 효과에 대한 자습서를 따르고 있습니다.
http://callmenick.com/2014/09/08/advanced-parallax-scrolling-effect/
좋은 예감이고 이해하고 구현하기가 꽤 쉽지만 일부 코드를 발견했습니다.
(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)
최신 정보
아래에 몇 가지 훌륭한 설명이 있지만 jQuery를 사용하는 것보다 더 나은 솔루션입니다.
$('.parallax').each(function(){
$this= $(this);
var window_y = (window.pageYOffset+1000);
var elBackgrounPos = "0 " + (window_y * speed) + "px";
$this.css('background-position', elBackgrounPos);
});
나에게 이것은 훨씬 더 읽기 쉽지만 자바 스크립트 버전이 더 잘 수행되거나 어떤면에서 더 효율적입니까?
document.querySelectorAll특별한 종류의 DOM 객체 인 NodeList를 반환합니다. 를 사용하여 Javascript 배열 call()의 slice()메서드를 호출하여 NodeList를 forEachNodeList에서 사용할 수없는 메서드 를 사용할 수있는 것으로 분할 할 수 있습니다.
브라우저의 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 의 속성은이고 a []의 __proto__속성은입니다 NodeList. 이것이 b가 호출 할 수 forEach있고 a가 호출 할 수없는 이유 입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다