웨이 포인트를 사용하는 스크롤에서 진행률 표시 줄을 활성화하는 방법은 무엇입니까?

Question

스크롤 할 때 진행률 표시 줄을 활성화하려면 waypoints.js을 사용하십시오. 그러나 그것은 작동하지 않고 진도 표시 줄이 스크롤되기 전에 '채워져있다'또는 (like in my current code) 페이지로드뿐만 아니라 스크롤에서도 '비어 있음'으로 유지됩니다.

HTML :

<div id="progress-bar-start" class="center-block progress-wrapper"> 
    <h4>UI/UX Design:</h4> 
    <div class="progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 60%"> 
      <span class="title">60%</span> 
     </div> 
    </div> 
</div> 

CSS :

#skills { 
    margin-top: 0px; 
    margin-bottom: 50px; 
    .skills-title::first-letter { 
    font-size: 60px; 
    color: pink; 
    } 
    .progress-wrapper { 
    width: 50%; 
    margin-top: 30px; 
    .progress-bar { 
     background-color: pink; 
     width: 0; 
     animation: progress 1.5s ease-in-out forwards; 
     .title { 
     opacity: 0; 
     animation: show 0.35s forwards ease-in-out 0.5s; 
     } 
    } 
    .progress { 
     height: 40px; 
    } 
    } 
    @keyframes show { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
    } 
} 

JS :

이 있습니다

$('#skills').waypoint(function(direction) { 
    if (direction === 'down') { 
     $('.progress-bar').addClass("show"); 
    } else { 
     $('.progress-bar').removeClass("show"); 
    } 
}, { 
    offset: '50%' 
}); 

Answer 1

몇 가지 여기서주의해야 할.

• 먼저 Waypoint의 offset 옵션부터 시작해 보겠습니다. 기본적으로 웨이 포인트는 요소의 상단이 창 상단에 도달 할 때 트리거됩니다. offset은 위 위치 간의 트리거링 거리를 지정합니다. 예제에서 #skills 섹션이 창 위쪽에 붙어 있습니다. 즉, offset >= 0으로 페이지로드시 즉시 트리거되고 '아래쪽'방향으로 한 번만 트리거됩니다.
• 두 번째로 진행률 표시 줄을 표시하려면 표시 여부/표시와는 반대로 표시 줄의 width을 설정해야합니다. 또한 너비 설정은 max-width 속성 대신 width을 통해 이루어져야합니다. CSS 애니메이션을 실행하는 데 필요합니다. 다음

따라서, 상기 용액은 :

HTML

<div class="progress"> 
    <!-- CHANGE style="max-width: 60%" TO data-score="60%" --> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-score="60%"></div> 
</div> 

JS

$('#skills').waypoint(function(direction) { 
    if (direction === 'down') { 
     $('.progress-bar').width(function(){ 
      // this here refers to individual .progress-bar items 
      return $(this).data('score'); 
     }); 
    } else { 
     $('.progress-bar').width(0); 
    } 
}, { offset: '10%' }); 

SCSS

,745,

#skills { 
    margin-top: 100px; 
    /* …the rest is the same… */ 
} 

Fiddle에서도 사용할 수있는 작업 예제입니다.

UPDATE (코멘트에 대한 답) : 당신이 애니메이션을 원하는 경우
은 사용자가 스크롤 다운 할 때마다 발생합니다,하지만 당신은을 변경할 수 있습니다 그 동안 진행 표시 줄의 감소 애니메이션을 표시하지 않습니다

이

$('#skills').waypoint(function(direction) { 
    if (direction === 'down') { 
     $('.progress-bar').width(function(){ 
      // this here refers to individual .progress-bar items 
      return $(this).data('score'); 
     }); 
    } 
}, { offset: '10%' }); 

$('#skills').waypoint(function(direction) { 
    if (direction === 'up') { 
     $('.progress-bar').width(0); 
    } 
}, { offset: '100vh' }); 

위의 코드는 여전히 감소 애니메이션을 실행하지만 (바이올린처럼) iframe에 실행하지 않을 경우 #skills 뷰포트를 벗어 때 트리거했기 때문에 습관이 표시되도록 : 코드는 다음과 같습니다. (이 경우에는 공개 클래스도 사용할 수 있습니다.) 기능을 더 잘 보여주기 위해 을 #skills에서 Fiddle version으로 설정했습니다.