gpt4 book ai didi

javascript - 依次显示滚动显示动画

转载 作者:行者123 更新时间:2023-12-03 06:24:13 25 4
gpt4 key购买 nike

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

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

动画(钻石、纸飞机、报纸和心)依次加载。当第一个图标完成等时,第 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 });

source

关于javascript - 依次显示滚动显示动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38720747/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com