>

이 템플릿을 사용하고 있습니다 : https://startbootstrap.com/template-overviews/creative/ 을 플러그인으로 jQuery를 스크롤 공개

이 페이지를 보면 : https://blackrockdigital.github.io/startbootstrap- 광고 소재/# 서비스

애니메이션 (다이몬드, 종이 비행기, 신문 및 하트)이 서로로드됩니다. 아이콘 숫자 2는 숫자 1이 끝날 때 애니메이션이 시작됩니다.

같은 일을하려고 할 때 모든 애니메이션이 동시에로드됩니다.

자바 스크립트 (단지 추가 .sr-step  템플릿으로 이동)

// Initialize and Configure Scroll Reveal Animation
window.sr = ScrollReveal();
sr.reveal('.sr-icons', {
    duration: 600,
    scale: 0.3,
    distance: '0px'
}, 200);
sr.reveal('.sr-button', {
    duration: 1000,
    delay: 200
});
sr.reveal('.sr-step', {
    duration: 600,
    delay: 200
});
sr.reveal('.sr-contact', {
    duration: 600,
    scale: 0.3,
    distance: '0px'
}, 300);

그리고 이것은 내 HTML의

               <div class="row">
                    <div class="col-lg-3 col-md-6 sr-step">
                            <h3 class="step-number">01</h3>
                           <div class="step-text"><p>Text text text text.</p>
                       </div>
                   </div>
                   <div class="col-lg-3 col-md-6 sr-step">
                        <h3 class="step-number">02</h3>
                       <div class="step-text">Text text text text.</div>
               </div>
                    <div class="col-lg-3 col-md-6 sr-step">
                        <h3 class="step-number">03</h3>
                       <div class="step-text">Text text text text.</div>
               </div>
               <div class="col-lg-3 col-md-6 sr-step">
                    <h3 class="step-number">04</h3>
                 <div class="step-text">Text text text text.</div>
         </div>
     </div>

  • 답변 # 1

    200 의 지연을 발견

    sr.reveal('.sr-icons', {
        duration: 600,
        scale: 0.3,
        distance: '0px'
    }, 200);
    
    

  • 답변 # 2

    시퀀서 점검 중, interval 의 선택적 특성이 명확 해졌습니다.  매개 변수가 불필요하게 혼동되었습니다. 지금은 다른 모든 옵션과 함께 살고있다.

    // v3
    window.sr = new ScrollReveal();
    sr.reveal('.tile', { reset: true }, 16);
    // v4
    ScrollReveal().reveal('.tile', { reset: true, interval: 16 });
    
    

    소스

관련 자료

  • 이전 git - 원격 저장소로 푸시해서는 안되는 파일을 버전 관리하는 방법은 무엇입니까?
  • 다음 variadic templates - 상속을 통한 C ++ 감지 관용구 실패