페럴렉스 예제
Scroll을 활용한 페럴렉스 효과 예제

 

 

Scroll을 활용한 페럴렉스 효과 예제

 

 

See the Pen wvWWqae by junheeleeme (@junheeleeme) on CodePen.

 

 

 

$(window).scroll(function() {
            
	var Top = parseInt($(window).scrollTop());
            
    //~~~     
}

 

패럴렉스 스크롤(Parallax Scroll) 

 

단순 의미로는 "시차"를 뜻하며 여기선 시차에 따라 모션을 다르게 적용하여 하여 역동적인 효과를 주는 것

 

1. 실시간 스크롤 값 구하기

// 실시간 스크롤 값 구하기
$(window).scroll(function(){

	var Top = $(this).scrollTop();

});

 

2. 객체의 상대적 Top, Left 구하기

 

// 1. 실시간 스크롤 값 구하기
$(window).scroll(function(){

	var Top = $(this).scrollTop(); // 실시간 스크롤 값
    
 //2. 객체의 상대적 Top, Left 구하기
    
    var item_top = $("#item1").offset().top; //#item의 상대적 left값
    var item_left = $("#item1").offset().left; //#item의 상대적 top값

});

 

3. 조건에 따라 효과주기

 

// 1. 실시간 스크롤 값 구하기
$(window).scroll(function(){

	var Top = $(this).scrollTop(); // 실시간 스크롤 값
    
 //2. 객체의 상대적 Top, Left 구하기
    
    var item_top = $("#item1").offset().top; //#item의 상대적 left값
    var item_left = $("#item1").offset().left; //#item의 상대적 top값

 //3. 조건에 따라 효과주기
 
 	if(Top > $("#item1").offset().top -30){ // <= 효과를 주기위한 조건
    
  		$("#item1").addClass('on'); //css로 효과를 주거나
        								// &
		$("#item1").css({background : "#f1d4d4"}); // animate 또는 (CSS + transition)
	}

});

 

원하는 스크롤 위치에 원하는 효과를 주면 된다.

 

배경색을 바꾸거나 3차원으로 띄운 객체를 이동시키는 등 원하는 효과를 넣으면 된다.

저작자표시