pageYOffset:0px

Parallax06

이질감 효과

Parallax Scrolling

01

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

02

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

03

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

04

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

05

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

06

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

07

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

08

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

09

Basic Coding

높은 목표를 세우고 스스로 채찍질 한다.

소스보기 
window.addEventListener("scroll",function(){
    let pageYOffset = (window.pageYOffset || document.documentElement.scrollTop) + screen.height/2;
    document.querySelector(".pageYOffset").textContent = pageYOffset;
    document.querySelectorAll(".content-item").forEach(elem => {

        //console.log(elem.childNodes)


        let target = elem.childNodes[7];            
        let offset = (pageYOffset - elem.offsetTop) * 0.2;
        target.style.transform = "translateY("+ offset +"px)"
    });
});
Close