我需要帮助来使用gsap staggerFromTo()对我的Web项目进行动画处理 [英] I need a help to animated my web project with gsap staggerFromTo()
本文介绍了我需要帮助来使用gsap staggerFromTo()对我的Web项目进行动画处理的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用 staggerFromTo()
属性一一弹出缩略图.
这是我的HTML代码.
< div class ="footer">< img src =" img/pic1.jpg"alt ="< img src =" img/pic2.jpg"alt ="< img src =" img/pic3.jpg"alt ="< img src =" img/pic4.jpg"alt ="</div>
这是我的js代码:
const footer = document.querySelector(.footer");const tl = new TimelineMax();tl.staggerFromTo(footer,1.5,{y:"-100px"},{y:"0%",stagger:0.2})
解决方案
您不需要此CSS.只是为了可视化示例!
希望我能对您有所帮助
gsap.fromTo('.footer> *',{y:0,不透明度:0,},{持续时间:1错位:0.2,y:-100,不透明度:1})
.footer {位置:绝对;底部:0px;}
< script src ="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js></script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>< div class ="footer">< img src ="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_013_by_54ka-165x165.jpg"alt =" width ="100">< img src ="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_014_by_54ka-165x165.jpg"alt =" width ="100">< img src ="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_015_by_54ka-165x165.jpg"alt =" width ="100">< img src ="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_016_by_54ka-165x165.jpg"alt =" width ="100"></div>
I want to popup my footer thumbnailed one by one with staggerFromTo()
property.
Here is my HTML code.
<div class="footer">
<img src="img/pic1.jpg" alt="">
<img src="img/pic2.jpg" alt="">
<img src="img/pic3.jpg" alt="">
<img src="img/pic4.jpg" alt="">
</div>
Here is my js code:
const footer = document.querySelector(".footer");
const tl = new TimelineMax();
tl.staggerFromTo(footer,1.5,{y: "-100px"},{y: "0%",stagger:0.2})
解决方案
You don't need this CSS. It's just to visualize the example!
I hope I've been helpful
gsap.fromTo('.footer > *', {
y: 0,
opacity: 0,
}, {
duration: 1,
stagger: 0.2,
y: -100,
opacity: 1,
})
.footer {
position: absolute;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="footer">
<img src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_013_by_54ka-165x165.jpg"
alt="" width="100">
<img src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_014_by_54ka-165x165.jpg"
alt="" width="100">
<img src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_015_by_54ka-165x165.jpg"
alt="" width="100">
<img src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_016_by_54ka-165x165.jpg"
alt="" width="100">
</div>
这篇关于我需要帮助来使用gsap staggerFromTo()对我的Web项目进行动画处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文