scroll animation 딜레이되는 현상 - KIN

KIN

뒤로가기 알림

jQuery scroll animation 딜레이되는 현상

작성일 18-03-23 11:21

페이지 정보

작성자 웹아이 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 조회 5,988회 댓글 0건

본문

그냥 스크롤없이 한자리에서 새로고침하면 문제없는데 스크롤할 때 두세번째 이미지가 자꾸 바로 안나오고 딜레이 돼요ㅠㅠ

delay(0)줘도 안되고 그렇다고 스크롤탑을 줄이자니 이미지가 너무 일찍 나와서 안되고.. 어떻게해야 할까요

 

<div id="wrap">

<img src="img/sc_01.png" alt="">

<img src="img/sc_02.png" alt=""> 

<img src="img/sc_03.png" alt=""> 

</div>

#wrap img{

position:absolute;

}

#wrap img:first-child{

top:10%;

right:-60%;

}

#wrap img:nth-child(2){

top:38.5%;

left:-40%;

}

#wrap img:last-child{

top:65%;

right:-60%;

}

 

$(window).on('scroll',function(){

if($(window).scrollTop()>=2000){

$('#wrap img:first-child').animate({right:'30%'},'fast');

}

if($(window).scrollTop()>=1800){

$('#wrap img:nth-child(2)').animate({left:'20%'},'fast');

}

if($(window).scrollTop()>=1600){

$('#wrap img:last-child').animate({right:'30%'},'fast');

}

});​ 


추천0

Re: scroll animation 딜레이되는 현상

페이지 정보

작성자 웹아이 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 5,988회 작성일 18-03-23 11:21

안녕하세요 디벨로드 입니다.^^


딜레이가 되는 이유가.. animate가 여러개가 중첩이 되서 그런것 처럼 보이는데요..

스크롤 이벤트의 경우 스크롤을 하고 멈출때 실행이 되는게 아니고 스크롤 되는동안 여러번 호출이 됩니다.

스크롤 이벤트 안에 scrollTop의 값을 console.log로 출력하게 되면 아래와 같이 여러번 나옵니다.

1f51cc0e492d5975e9816bb6c442145c_1521771713_98.png
물론 스크롤을 많이 한게 아니고 1~2mm 정도 움직였을뿐입니다.^^;;

그렇다면 조건이 맞다면 animate가 11번 실행되는것 입니다.ㅜㅜ

그래서 간단하게 체크를 해서 처리를 해줘야 합니다.

var check_animate1 = false; // 처음에는 animate가 실행중이지 않으니 False로 설정합니다.
$(window).on('scroll',function(){
if($(window).scrollTop()>=2000 && check_animate1 == false){ // animate가 실행중이지 않을 경우만
check_animate1 = true; // if문이 실행되면 체크값을 바로 True로 변경해줍니다.
$('#wrap img:first-child').animate({right:'30%'},'fast',function(){
check_animate1 = false; // animate가 끝나면 체크값을 다시 False로 변경해줍니다.
});
}
});

animate가 실행중인지 체크를 해주는 변수에 False값을 넣구요

if문에서 현재 animate가 실행중인지 알수 있는 check_animate1 변수도 함께 조건문에 추가해줍니다.

scrollTop이 2000이 되면 if문이 실행되고 animate가 실행될 것이기 때문에 

check_animate1 변수를 True로 바꿔줍니다.

그럼 다시 중복으로 스크롤 이벤트가 실행되어도 check_animate1 == false에서 막히게 됩니다.

그리고 animate가 끝나면 다시 check_animate1값을 false로 바꿔줌으로써 재실행 가능합니다.

댓글목록

등록된 댓글이 없습니다.

Road to Deveropment
Road to Deveropment
상단으로