parallaxEffect05

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect05.html

function scroll(){		//함수 scroll 실행
	let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;	
    //변수 scrollTop에 브라우저의 pageYOffset값 또는 html의 scrollTop값 또는 브라우저의 screenY값 저장
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);	//클래스 scrollTop의 span태그에 Math.round(scrollTop)값 출력

	document.querySelectorAll(".content__item").forEach((item,i) => {		//클래스 content__item들을 선택해 element값을 item에 index값을 i에 저장
    	let offset1 = (scrollTop - item.offsetTop) * 0.1;		//변수 offset1에 (scrollTop - item.offsetTop) * 0.1 저장
        let offset2 = (scrollTop - item.offsetTop) * 0.15;		//변수 offset2에 (scrollTop - item.offsetTop) * 0.15 저장

		let target1 = item.querySelector(".content__item__img");		//변수 target1에 클래스 item의 content__item__img 저장
        let target2 = item.querySelector(".content__item__desc");		//변수 target2에 클래스 item의 content__item__img 저장

		gsap.to(target1,{duration: 0.3, y: offset1, ease: "power1.out"});		//gsap로 target1에 0.3초동안 y축으로 offset1값만큼 이동 
        gsap.to(target2,{duration: 0.3, y: offset2, ease: "power1.out"});		//gsap로 target2에 0.3초동안 y축으로 offset2값만큼 이동 
    });
    requestAnimationFrame(scroll);		//requestAnimationFrame으로 scroll 실행
}
scroll();		//함수 scroll 실행