scrollTop() : 0

Parallax07

이질감 효과

Parallax Scrolling

01

Basic Coding

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

02

Basic Coding

애초에 기대를 하니, 배신을 당하는 것이다.

03

Basic Coding

나는 김근육, 올해로 9수다.

04

Basic Coding

큰 시련 끝에 보상이 무조건 있지는 않는다.

05

Basic Coding

다섯 명중 한명은 무조건 쓰레기다.

06

Basic Coding

노력만으로 안되는 일이 있을 수 있다.

07

Basic Coding

성격만 좋으면 된다는 말은 다 거짓말이다.

08

Basic Coding

큰 복수심은 자기자신을 부슨다.

09

Basic Coding

사람은 아무리 선해 보여도 제2의 가면은 언제나 존재한다.

소스보기 
// //제~이! 쿼~리!
// let scrollTop = $(window).scrollTop();

// //속도차이를 이용한 효과 (밖에있는거 보다 안에있는게 더느림 ㅇㅇ)
// function scroll(){
//     let newScrollTop = $(window).scrollTop();
//     let different = newScrollTop - scrollTop;

//     console.log("scrollTop : " + scrollTop);
//     console.log("newScrollTop : " + newScrollTop);
//     console.log("different : " + different);

//     $(".content-item-desc").css({"transform":"skewY("+different+"deg)"});

//     scrollTop = newScrollTop;   //different 상시 0
//     requestAnimationFrame(scroll)
// }
// scroll()

//javascript
let pageYOffset = window.pageYOffset;

const scroll = () => {
    const newPageYOffset = window.pageYOffset;
    const different = newPageYOffset - pageYOffset;

    // console.log("pageYOffset : " + pageYOffset);
    // console.log("newPageYOffset : " + newPageYOffset);
    // console.log("different : " + different);

    //$(".content-item-imgWrap").css({"transform":"skewY("+different+"deg)"});
    // let target = document.querySelectorAll(".content-item-imgWrap")
    // target.forEach(box => {
    //     box.style.transform = "rotate("+different * 0.03+"deg)";
    // });

    //gsap
    //gsap.to(".content-item-img",{duration: 0.3, ease: "Power2.out", rotation: different});
    gsap.to(".content-item-img",{duration: 0.3, ease: "Power2.out", skewY: different * 0.2});
    gsap.to(".content-item-desc",{duration: 0.3, ease: "Power2.out", skewY: -different * 0.3});

    pageYOffset = newPageYOffset;
    requestAnimationFrame(scroll);
}
scroll()


//일정한 시간 동안 반복적으로 함수를 실행


// let num = 0;
// function render(){
//     $(".content-item-num").text(num);
//     num++;  
//     requestAnimationFrame(render)    //애 애니메이션 댕부드러움
//     //setInterval(render, 0.1);      //애 애니메이션 빨라지면 버벅임 댕무거움
// }
// render()
Close