애니메이션 진행률 표시 줄

Question

브라우저의 뷰포트에서 진행률 표시 줄이 보이면 0에서부터 백분율로 애니메이션을 적용해야하는 진행률 표시 줄 애니메이션 작업을하고 있습니다. 애니메이션 은 요소가 뷰로 스크롤 될 때 항상을 발생시켜야합니다. 즉, 외부로 스크롤하면 애니메이션이 시작되도록 재설정해야합니다.

var $animation_elements = $('.progressAnimation'); 
 
var $window = $(window); 
 

 
function check_if_in_view() { 
 
    var window_height = $window.height(); 
 
    var window_top_position = $window.scrollTop(); 
 
    var window_bottom_position = (window_top_position + window_height); 
 
    
 
    $.each($animation_elements, function() { 
 
    var $element = $(this); 
 
    var element_height = $element.outerHeight(); 
 
    var element_top_position = $element.offset().top; 
 
    var element_bottom_position = (element_top_position + element_height); 
 
    
 
    //check to see if this current container is within viewport 
 
    if ((element_bottom_position >= window_top_position) && 
 
     (element_top_position <= window_bottom_position)) { 
 
     $element.animate({ 
 
      "width": (600 * $($element).data("percent"))/100 
 
     }, 3000); 
 
    } else { 
 
     $element.animate({ 
 
      "width": "0" 
 
     }, 1000) 
 
    } 
 
    }); 
 
} 
 

 
$window.on('scroll resize', check_if_in_view); 
 
$window.trigger('scroll');

body{ 
 
      height:4000px; 
 
      margin-top:800px; 
 
     } 
 
     .myContainer{ 
 
      width:1000px; 
 
      margin:50px auto; 
 
     } 
 
     .myContainer .progressBackground{ 
 
      width:600px; 
 
      height:40px; 
 
      margin:0 auto 40px; 
 
      background-color:#eaeaea; 
 
     } 
 
     .myContainer .progressAnimation{ 
 
      width:0; 
 
      height:100%; 
 
      background-color:#00f36d; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <div class="myContainer"> 
 
     <div class="progressBackground"> 
 
      <div class="progressAnimation" data-percent="80"> 
 

 
      </div> 
 
     </div> 
 
     <div class="progressBackground"> 
 
      <div class="progressAnimation" data-percent="60"> 
 

 
      </div> 
 
     </div> 
 
    </div>

참고 : 전체 화면에서 실행 코드

은 여기 내 비 작동 코드입니다.

Answer 1

스크롤/크기 조정 이벤트 내에서 자바 스크립트를 사용하여 애니메이션을 작성하는 것은 현명하지 않습니다. 이벤트를 조절하지 않으면 아주 간단한 작업을하는 것이 현명합니다.

나는 당신의 코드를 파고 들지 않았고 그것이 효과가없는 이유를 설명했지만 코드에 기반한 예제를 고안했지만 CSS (브라우저 프로세스에서 애니메이션을 오프로드)를 사용하여 애니메이션을 만들고 있습니다. 요소의 상태를 변경해야하는 경우와 완전히 다릅니다. 즉, 요소가 화면에서 벗어날 때만 진행 막대를 0으로 축소한다는 것을 의미합니다 (스크롤/크기 조정 이벤트가 발생하는 모든 시간이 아닌). 화면이 진행 중일 때 진행 막대를 애니메이션 할 때 꺼져 있습니다.

var $animation_elements = $('.progressAnimation'); 

    $(window).on('scroll resize', function(){ 
    var viewportHeight = document.documentElement.clientHeight; 

    $animation_elements.each(function() { 
    var $el = $(this); 
    var position = this.getBoundingClientRect(); 

    if (position.top > viewportHeight || position.bottom < 0) { 
     this.inView && $el.css({ width: 0 }); 
     this.inView = false; 
    } else { 
     !this.inView && $el.css({ width: 6 * $el.data("percent") }); 
     this.inView = true; 
    } 
    }); 
    }); 

당신은 내가 또한 가능한 한 빨리 이벤트 핸들러를 만들기 위해 가능한 한 바닐라 자바 ​​스크립트로 사용했습니다 볼 수 있듯이 :

이

는 코드입니다.

및 here is a working JSFiddle.