jQuery, 요소가 화면에있을 때 애니메이션 재생 방법

지점에 도달하면 브라우저가 애니메이션을 동시에 재생합니다. 그건 내가 원하는 것이 아니야. 브라우저는 모든 애니메이션을 분리하여 재생해야합니다.jQuery, 요소가 화면에있을 때 애니메이션 재생 방법

이 내 jQuery 코드입니다 :

function initScrollAnimation(){ 

    $('.slideLeft').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight() + $(window).height() - 500; 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      if(bottom_of_window > bottom_of_object){ 
       $(".slideLeft").addClass('active'); 
      }; //else { 
       //$(".slideLeft").removeClass('active'); 
      //}; 
    }); 

    $('.slideRight').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight() + $(window).height() - 500; 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      if(bottom_of_window > bottom_of_object){ 
       $(".slideRight").addClass('active'); 
      }; //else { 
       //$(".slideLeft").removeClass('active'); 
      //}; 
    }); 

}

그리고 이것은 CSS 코드

.slideLeft{ 
    margin-left:-25%; 
} 

    .slideRight{ 
     margin-right:-25%; 
    } 

.slideLeft.active{ 
    margin-left: 0%; 
    transition: all 0.5s ease-in; 
} 

    .slideRight.active{ 
     margin-right: 0%; 
     transition: all 0.5s ease-in; 
    }

출처

2016-07-04 Nicky Wiesbrock

[웨이 포인트] (https://github.com/imakewebthings/waypoints) 라이브러리를 사용하여 요소가 도달하면 – Mivaweb

의 "도달 지점에 도달했을 때"할 수 있습니다. 어떤 시점에 도달 했습니까? –

알터에게있는 객체

.slideLeft{ 
    margin-left:-25%; 
} 

    .slideRight{ 
     margin-right:-25%; 
    } 

.slideLeft.active{ 
    margin-left: 0%; 
    transition: all 0.7s ease-in; 
} 

    .slideRight.active{ 
     margin-right: 0%; 
     transition: all 0.3s ease-in; 
}

나에 대한 시간 제한 기능을 사용하기위한 전환 시간 div 중 하나 :

setTimeout(function(){ 
$('.slideRight').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight() + $(window).height() - 500; 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      if(bottom_of_window > bottom_of_object){ 
       $(".slideRight").addClass('active'); 
      }; //else { 
       //$(".slideLeft").removeClass('active'); 
      //}; 
    }); 
}, 200);

출처

2016-07-04 10:47:26 madalinivascu

귀하의 코멘트 주셔서 감사합니다, 그 대답은 내가 무엇을 찾고 있었는지 않습니다. 부스에는 slideLeft와 slideRight div라는 두 개의 섹션이 있습니다. 첫 번째 div가 화면에있을 때 첫 번째 div 및 두 번째 div에 대한 애니메이션이 시작되지만 두 번째 div는 screen에 없습니다. div가 화면에있을 때 브라우저에서 애니메이션을 구분하기를 원합니다. –

당신은 (수직) 다른 위치에있는 요소를 가지고 말과가 표시되었을 때 요소에 대한 애니메이션을 트리거 할 경우 :

이

그냥 당신이 순간으로 $(this).addClass('active');

와 $(".slideLeft").addClass('active'); 교체 .slideLeft 중 하나의 위치를 확인하고 .slideRight

으로

동일한 .slideLeft 모든 요소에 active 클래스 추가

출처

2016-07-04 12:00:14 David

이 작동하지 않습니다. 다른 div 이름을 사용하지만 쉽게 할 수 있습니다. –

jQuery, 요소가 화면에있을 때 애니메이션 재생 방법

답변

관련 문제