依次显示滚动显示动画

Display Scroll Reveal Animation after each other

本文关键字：显示 动画 滚动      更新时间：2023-09-26

我正在使用此模板：https://startbootstrap.com/template-overviews/creative/使用插件jQuery Scroll Reveal

如果您查看此页面：https://blackrockdigital.github.io/startbootstrap-creative/#services

动画（Dimond、纸飞机、报纸和心脏）一个接一个地加载。当数字1完成时，图标数字2开始动画化。

当我尝试做同样的事情时，所有的动画都会同时加载。

JavaScript（刚刚将.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>

在测序仪大修期间，很明显，interval参数的可选性质不必要地令人困惑。它现在与所有其他选项共存。

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

源

在200 上发现延迟

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